React Native 与 Android原生Activity互相跳转页面
来源:互联网 发布:淘宝联盟怎么自助推广 编辑:程序博客网 时间:2024/05/21 17:04
前言:RN作为混合开发,肯定需要与原生直接的页面跳转,这里也属于和原生端通信的知识模块。我们知道Android的页面跳转是通过Intent、Rn是通过路由,而两者直接页面互相跳转就需要原生借助JS暴露接口给Rn来实现了。闲话不说直接上图:
【one】第一步,AS创建一个Activity,显示HelloWorld:
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(createView()); } private View createView() { LinearLayout ll= new LinearLayout(this); ll.setGravity(Gravity.CENTER); ll.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); // 设置文字 TextView mTextView = new TextView(this); mTextView.setText("hello world"); LinearLayout.LayoutParams mLayoutParams = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); // 在父类布局中添加它,及布局样式 ll.addView(mTextView, mLayoutParams); return ll; }
【two】第二步,创建MyIntentModule类,并继承ReactContextBaseJavaModule。注意:方法头要加@ReactMethod/** * 原生Activity与React交互——模块 */public class MyIntentModule extends ReactContextBaseJavaModule { public MyIntentModule(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { return "IntentMoudle"; } //注意:记住getName方法中的命名名称,JS中调用需要 @ReactMethod public void startActivityFromJS(String name, String params){ try{ Activity currentActivity = getCurrentActivity(); if(null!=currentActivity){ Class toActivity = Class.forName(name); Intent intent = new Intent(currentActivity,toActivity); intent.putExtra("params", params); currentActivity.startActivity(intent); } }catch(Exception e){ throw new JSApplicationIllegalArgumentException( "不能打开Activity : "+e.getMessage()); } } @ReactMethod public void dataToJS(Callback successBack, Callback errorBack){ try{ Activity currentActivity = getCurrentActivity(); String result = currentActivity.getIntent().getStringExtra("data"); if (TextUtils.isEmpty(result)){ result = "没有数据"; } successBack.invoke(result); }catch (Exception e){ errorBack.invoke(e.getMessage()); } }//注意:startActivityFromJS、dataToJS方法添加RN注解(@ReactMethod),否则该方法将不被添加到RN中}
【three】第三步,创建MyReactPackage类,实现ReactPackage接口暴露给RN调用,在createNativeModules里注册上一步添加的模块:
/** * 注册模块 */public class MyReactPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { return Arrays.<NativeModule>asList(new MyIntentModule(reactContext)); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); }}
【four】第四步,在MainApplication中的getPackages方法中注册到ReactPackage中:
@Overrideprotected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new MyReactPackage() );}
【five】第五步,接下来的工作便是RN的Index.js代码:
《从RN跳转到Android》
import React, { Component } from 'react';import { View, NativeModules, TouchableNativeFeedback, ToastAndroid} from 'react-native';export default class App extends Component<{}> { _onPressButton() { console.log("You tapped the button!"); NativeModules .IntentMoudle .startActivityFromJS("com.myreactdemo.MyActivity", null); } render() { return ( <View> <TouchableNativeFeedback onPress={this._onPressButton}> <Text>跳转到原生页面</Text> </TouchableNativeFeedback> </View> ); }}
《从Android跳转到RN》
可以在rn中拿到activity跳转传递的值,值的传递跟普通activity之间的跳转没有差别:
- getData() {
- NativeModules.IntentModule.dataToJS((msg) => {
- console.log(msg);
- let base = require('./constant');
- base.columnID = msg;
- //ToastAndroid.show('JS界面:从Activity中传输过来的数据为:' + base.columnID, ToastAndroid.SHORT);
- },
- (result) => {
- ToastAndroid.show('JS界面:错误信息为:' + result, ToastAndroid.SHORT);
- })
- }
阅读全文
1 0
- React Native 与 Android原生Activity互相跳转页面
- (十二)React Native跳转到android原生界面Activity
- react-native 与原生互相调用
- 从React Native 跳转到原生页面
- React native 界面跳转原生Android界面
- react native js调用android原生activity
- Android第三方应用或者原生app内跳转React native的某个页面
- react-native 与高德地图(amap)原生互相调用
- 关于React Native 跳转到原生页面界面详解
- react-native 页面跳转与数据操作
- react-native 页面跳转
- React Native 与原生层通讯(Android)
- 原生Android项目中集成React native页面
- React Native 和Android 原生页面相互调用
- 在iOS中创建React-Native页面,并跳转到原生页面
- react-native页面的跳转
- react-native Navigator 页面跳转
- React Native 与 原生交互
- 2017-10-30每日一练
- JZOJ5432. 【NOIP2017提高A组集训10.28】三元组
- 移动架构30_面向对象式手写数据库架构设计二(修改、删除、查询、拓展)
- html中限制input字符串长度
- Json Web Token与spring boot-actuator结合
- React Native 与 Android原生Activity互相跳转页面
- 用户配置文件,用户管理,用户组管理
- 《机器学习实战》学习总结(一)——K近邻算法(KNN)
- 日常故障记录之01设置共享文件夹时遇到的kernel panic 问题和解决方法
- C++函数默认参数及占位参数
- Day03_Java_作业
- Java的设计模式
- 关于MyBatis和Spring整合时,No bean named 'xxx' is defined我遇到的问题
- 深度学习&计算机视觉界大牛主页