js实现界面向原生界面发消息并跳转功能

这篇文章主要为你们详细介绍了js实现界面向原生界面发消息并跳转功能,具备必定的参考价值，感兴趣的小伙伴们能够参考一下

本文实例为你们分享了js界面向原生界面发消息并跳转的具体代码，供你们参考，具体内容以下

步骤一 
在idea中，打开rn项目下的./Android/app,这个过程须要一点儿时间，可能还须要下载gradle的依赖什么的。

步骤二 
跟作原生app没差，咱们新建一个TestActivity，简单起见，仅实现以下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

public class TestActivity extends AppCompatActivity {     private Button mBtGoBack;     @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_test);     mBtGoBack = (Button) findViewById(R.id.bt_go_back);     mBtGoBack.setOnClickListener(new View.OnClickListener() {       @Override       public void onClick(View view) {         finish();       }     });     } }

步骤三 
写一个类ExampleInterface extends ReactContextBaseJavaModule,在该类中接收消息。 
具体代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

public class ExampleInterface extends ReactContextBaseJavaModule {     private ReactApplicationContext mRApplicationContext;     public ExampleInterface(ReactApplicationContext reactContext) {     super(reactContext);     mRApplicationContext = reactContext;   }     //RN使用这个名称来调用原生模块的其余函数   @Override   public String getName() {     return "ExampleInterface";   }   //必须写@ReactMethod，将其注册为可以被React调用的函数   @ReactMethod   public void HandlerMessage(String aMessage){     Log.d("lt","====receive message from RN==="+aMessage);      //这部分实现简单的跳转     Intent intent = new Intent(mRApplicationContext,TestActivity.class);     intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);     mRApplicationContext.startActivity(intent);   }   }

步骤四

实现一个包管理器，并将接收消息的类ExampleInterface，注册进去。 
代码以下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

public class AnExampleReactPackage implements ReactPackage {     @Override   public List<NativeModule> createNativeModules(ReactApplicationContext reactApplicationContext) {     List<NativeModule> modules = new ArrayList<>();     modules.add(new ExampleInterface(reactApplicationContext));     return modules;   }     @Override   public List<Class<? extends JavaScriptModule>> createJSModules() {     return Collections.emptyList();   }     @Override   public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {     return Collections.emptyList();   } }

步骤五 
在MainApplication中添加包管理类AnExampleReactPackage；

?

1 2 3 4 5 6 7

@Override  protected List<ReactPackage> getPackages() {   return Arrays.<ReactPackage>asList(     new MainReactPackage(),     new AnExampleReactPackage()   );  }

步骤六 
在js界面，发送消息；

?

1 2 3

buttonPress:function(){   NativeModules.ExampleInterface.HandlerMessage('test');   }

以上就是本文的所有内容，但愿对你们的学习有所帮助，也但愿你们多多支持脚本之家。