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

来源：动视网责编：小OO 时间：2020-11-27 20:29:11

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

步骤一；在idea中，打开rn项目下的./Android/app，这个过程需要一点儿时间，可能还需要下载gradle的依赖什么的。步骤二；跟做原生app没差，我们新建一个TestActivity，简单起见，仅实现如下：

推荐度：

点击下载本文 文档为doc格式

导读步骤一；在idea中，打开rn项目下的./Android/app，这个过程需要一点儿时间，可能还需要下载gradle的依赖什么的。步骤二；跟做原生app没差，我们新建一个TestActivity，简单起见，仅实现如下：

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

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

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

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,在该类中接收消息。
具体代码：

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，注册进去。
代码如下：

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；

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

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

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

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

推荐度：

点击下载本文 文档为doc格式

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

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐