手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js实现界面向原生界面发消息并跳转功能
js实现界面向原生界面发消息并跳转功能
摘要:本文实例为大家分享了js界面向原生界面发消息并跳转的具体代码,供大家参考,具体内容如下步骤一在idea中,打开rn项目下的./Android...

本文实例为大家分享了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实现界面向原生界面发消息并跳转功能】相关文章:

nodejs实现遍历文件夹并统计文件大小

JS实现简单路由器功能的方法

原生js实现的贪吃蛇网页版游戏完整实例

基于jQuery插件实现环形图标菜单旋转切换特效

js实现点击链接后延迟3秒再跳转的方法

javascript实现简单的省市区三级联动

jQuery实现延迟跳转的方法

js实现发送验证码后的倒计时功能

js实现顶部可折叠的菜单工具栏效果实例

javascript实现获取服务器时间

精品推荐
分类导航