js实现界面向原生界面发消息并跳转功能
2016-11-22 14:20
821 查看
本文实例为大家分享了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实现界面向原生界面发消息并跳转功能
- 实现js界面向原生界面发消息,并跳转
- 利用runTime实现UIWebView 与 JS 随意交互,JS跳转原生页面,亦可实现推送界面万能动态跳转
- JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
- html+css+js实现xp window界面及有关功能
- JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
- JS 退出系统并跳转到登录界面的实现代码
- 原生JS实现购物车结算功能代码+zepto版
- html+css+js实现xp window界面及有关功能
- js仿淘宝在分页导航中实现跳转到指定分页功能
- 原生js实现 常见的jquery的功能
- 【JS】原生js实现拖拽功能基本思路
- IOS程序开发之跳转短信发送界面实现发送短信功能
- JS 退出系统并跳转到登录界面的实现代码
- 使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能
- php+js iframe实现上传头像界面无跳转
- js实现界面自动跳转
- js实现select跳转功能代码
- js实现5秒后自动跳转到管理界面
- 原生JS不到30行,实现类似javascript MVC的功能-minTemplate