写点什么

React Native 与 嵌入 Android 原生与 Activity 页面互相跳转

用户头像
Android架构
关注
发布于: 2021 年 11 月 05 日

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 中


}

第三步,创建 MyReactPackage 类

实现 ReactPackage 接口暴露给 RN 调用,在 createNativeModules 里注册上一步添加的模块:


/**


  • 注册模块


*/


public class MyReactPackage implements ReactPackage {


@Override


public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {


return Arrays.<NativeModule>asList(new MyIntentModule(reactContext));


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


}


@Override


public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {


return Collections.emptyList();


}


}

第四步,在 MainApplication 中的 getPackages 方法中注册到 ReactPackage 中:

@Override


protected List<ReactPackage> getPackages() {


return Arrays.<ReactPackage>asList(


new MainReactPackage(),


new MyReactPackage()


);


}

第五步,接下来的工作便是 RN 的 Index.js 代码:

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,


})


}


}


}

第七步,运行安装:

输入命令启动应用:


1.进入项目根目录:

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
React Native 与 嵌入Android原生与Activity页面互相跳转