React Native 与 Android原生Activity互相跳转页面
2017-10-30 21:11
459 查看
前言:RN作为混合开发,肯定需要与原生直接的页面跳转,这里也属于和原生端通信的知识模块。我们知道Android的页面跳转是通过Intent、Rn是通过路由,而两者直接页面互相跳转就需要原生借助JS暴露接口给Rn来实现了。闲话不说直接上图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201710/e387ca8fe329820a58507c654baf639d)
[javascript] view
plain copy
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);
})
}
拿到这个值之后存在了常量类里,就是通过这个常量来实现跳转到不同的界面,之后的事情就迎刃而解了:
[java] view
plain copy
componentDidMount() {
let base = require('./constant');
//ToastAndroid.show(base.columnID, ToastAndroid.SHORT);
let id = base.columnID;
if (id == "3") {
const { navigator } = this.props;
if (navigator) {
navigator.push({
name: 'secondPage',
component: secondPage,
})
}
} if (id == "4") {
const { navigator } = this.props;
if (navigator) {
navigator.push({
name: 'otherPage',
component: otherPage,
})
}
}
}
【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中:
@Override protected 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之间的跳转没有差别:
[javascript] view
plain copy
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);
})
}
拿到这个值之后存在了常量类里,就是通过这个常量来实现跳转到不同的界面,之后的事情就迎刃而解了:
[java] view
plain copy
componentDidMount() {
let base = require('./constant');
//ToastAndroid.show(base.columnID, ToastAndroid.SHORT);
let id = base.columnID;
if (id == "3") {
const { navigator } = this.props;
if (navigator) {
navigator.push({
name: 'secondPage',
component: secondPage,
})
}
} if (id == "4") {
const { navigator } = this.props;
if (navigator) {
navigator.push({
name: 'otherPage',
component: otherPage,
})
}
}
}
相关文章推荐
- Android第三方应用或者原生app内跳转React native的某个页面
- 从零学Android(三)、Activity页面的跳转
- Android开发中,activity页面跳转后是空白
- Android页面跳转器--消除跳转时Activity之间的耦合性
- Android中Activity和Fragment页面跳转
- android中页面跳转以及数据在Activity之间的传递
- Android混合开发之Activity类与html页面之间的相互跳转(并解决黑屏问题)
- JS与Android交互之html页面跳转到Android Activity
- 关于React Native 跳转到原生页面界面详解
- Android页面跳转结束前一个activity
- android 第三方或者原生的ListView OnItemClickListene条目点击跳转下个页面传值问题!
- (十二)React Native跳转到android原生界面Activity
- Android实现Activity页面跳转切换动画特效
- Android混合开发之Activity类与html页面之间的相互跳转
- 【Android基础】页面跳转与传值(Activity跳转与传值)
- React Native 和Android 原生页面相互调用
- 新增Activity、页面传值跳转和点击按钮触发事件『Android系列九』
- Android多个Activity之间的页面跳转带参传递与返回
- Android中实现activity的页面跳转并传值
- Android混合开发之Activity类与html页面之间的相互跳转(并解决黑屏问题)