js实现界面向原生界面发消息并跳转功能
编程学习 2021-07-04 19:19www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了js实现界面向原生界面发消息并跳转功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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');
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：详解js界面跳转与值传递
下一篇：JavaScript面向对象分层思维全面解析