安卓原生页面与react-native页面相互跳转实现
安卓原生页面与react-native页面相互跳转实现
- React-Native集成到现有的安卓项目请移步:
- 1.创建react-native项目
- 2.原生页面跳转到react-native页面
- 3.react-native页面跳转到原生页面
React-Native集成到现有的安卓项目请移步:
链接: https://blog.csdn.net/major_zhang/article/details/84645352
1.创建react-native项目
因为react-native更新得很快,使用react-native init命令创建项目会默认使用最新的react-native版本,这也导致了与之前一些api的不兼容。
我们可以使用下面的命令指定使用的react-native版本:
react-native init demo --verbose --version 0.57.7
2.原生页面跳转到react-native页面
使用android studio导入项目下的android子目录。由于使用命令react-native run-android默认会启动MainActivity作为第一个页面并且现在MainActivity会默认加载react-native页面,这里我们是想从MainActivity跳转到react-native页面。所以要改写一下MainActivity:
在MainActivity中添加两个按钮,一个跳转到react-native的主页面,另一个跳转到react-native的子页面。
public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_rn);findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {startActivity(new Intent(MainActivity.this,RNActivity.class));}});findViewById(R.id.btn_test).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {startActivity(new Intent(MainActivity.this,TestActivity.class));}});}
}
然后我们创建RNActivity用于承载react-native的主页面,注意在getMainComponentName方法中返回的字符串就是在react-native中注册的组件名字。
public class RNActivity extends ReactActivity {/*** Returns the name of the main component registered from JavaScript.* This is used to schedule rendering of the component.*/@Overrideprotected String getMainComponentName() {return "application";}
}
在react-native注册的组件定义如下:AppRegistry.registerComponent方法的第一个参数是组件的名字,第二个参数是需要显示的组件。这里第二个参数我们使用了导航组件react-navigator来显示。
项目的index.js
import React, { Component } from 'react';
import { Text, AppRegistry } from 'react-native';
import {AppStackNavigator} from "./src/navigator/AppNavigator"AppRegistry.registerComponent('application', () => AppStackNavigator);
然后使用命令react-native run-android将项目运行起来。
3.react-native页面跳转到原生页面
需要从react-native页面跳转到原生页面步实现方法是这样的:首先,在原生中创建一个继承ReactContextBaseJavaModule的类,重写getName方法并且添加一个供react-native调用的方法,该方法就是用于页面跳转。然后,创建一个继承ReactPackage的类,将继承于ReactContextBaseJavaModule的类的实列添加进去。最后,在MainApplication的getPackages方法中,添加继承于ReactPackage的类的实例。
代码如下:
MyIntentModule
package com.demo;import android.app.Activity;
import android.content.Intent;
import android.text.TextUtils;import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;public class MyIntentModule extends ReactContextBaseJavaModule {public MyIntentModule(ReactApplicationContext reactContext) {super(reactContext);}@Overridepublic String getName() {return "IntentMoudle";//这里定义的是该模块名字}@ReactMethodpublic void startActivityFromJS(String name, String params){//该模块的方法try{Activity currentActivity = getCurrentActivity();if(null!=currentActivity){Class toActivity = Class.forName("com.demo."+name);Intent intent = new Intent(currentActivity,toActivity);intent.putExtra("params", params);currentActivity.startActivity(intent);}}catch(Exception e){throw new JSApplicationIllegalArgumentException("不能打开Activity : "+e.getMessage());}}@ReactMethodpublic 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());}}
}
MyReactPackage
package com.demo;import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;import java.util.Arrays;
import java.util.Collections;
import java.util.List;public class MyReactPackage implements ReactPackage {@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {return Arrays.<NativeModule>asList(new MyIntentModule(reactContext));}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}
}MainApplication
```javapackage com.demo;import android.app.Application;import com.facebook.react.ReactApplication;
import org.devio.rn.splashscreen.SplashScreenReactPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;import java.util.Arrays;
import java.util.List;public class MainApplication extends Application implements ReactApplication {private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {@Overridepublic boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;}@Overrideprotected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new SplashScreenReactPackage(),new MyReactPackage()//将MyReactPackage实例添加进来);}@Overrideprotected String getJSMainModuleName() {return "index";}};@Overridepublic ReactNativeHost getReactNativeHost() {return mReactNativeHost;}@Overridepublic void onCreate() {super.onCreate();SoLoader.init(this, /* native exopackage */ false);}
}
在react-native中调用,这个界面我写的示例比较多。其实使用起来很简单,先引入NativeModules,添加一个按钮,点击调用jumpNative方法。在方法中调用在原生定义的方法:NativeModules.IntentMoudle.startActivityFromJS(“MainActivity”, null);
/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react';
import {AsyncStorage,StyleSheet,Image,View,Text,TouchableOpacity,ActivityIndicator,DrawerLayoutAndroid,NativeModules,//引入的模块} from 'react-native';export default class Home extends Component {jumpNative(){//调用原生方法NativeModules.IntentMoudle.startActivityFromJS("MainActivity", null);}render() {const {navigation} = this.props;return (<View><View style={styles.container}><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('TestPage');}}><Text style={styles.bt_text}>注册的子页面</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {this.jumpNative();}}><Text style={styles.bt_text}>跳转到原生页面</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('Page1', {name: '动态的title'});}}><Text style={styles.bt_text}>页面跳转</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('FlatListPage');}}><Text style={styles.bt_text}>列表页面</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('KeyboardAvoidingViewPage');}}><Text style={styles.bt_text}>键盘弹起自动伸缩</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('SomeComponent');}}><Text style={styles.bt_text}>一些组件</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('TextPage');}}><Text style={styles.bt_text}>文本标签</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('TouchablePage');}}><Text style={styles.bt_text}>Touchable</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('HookPage');}}><Text style={styles.bt_text}>生命周期</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('PlaceAnOrder');}}><Text style={styles.bt_text}>包车物流</Text></TouchableOpacity><TouchableOpacity style={styles.bt} activeOpacity={0.5}onPress={() => {navigation.navigate('Component11');}}><Text style={styles.bt_text}>时间选择器</Text></TouchableOpacity><ActivityIndicator size="large" color="#0000ff"/><View style={styles.container}><Imagestyle={{width: 180, height: 180}}source={{uri: 'http://wx4.sinaimg.cn/bmiddle/78b88159gy1g8ryut3tdrg208l08lkgn.gif'}}/><Imagestyle={{width: 180, height: 180}}source={{uri: 'http://wx3.sinaimg.cn/bmiddle/006GJQvhly1g7qk0w0kyrg307e07e1hs.gif'}}/></View></View></View>);}
}const styles = StyleSheet.create({container: {alignItems: 'center',flexDirection: 'row',flexWrap: 'wrap'},bt: {width: 180,height: 50,backgroundColor: '#0af',justifyContent: 'center',alignItems: 'center',borderRadius: 5,marginLeft: 5,marginTop: 5,},bt_text: {color: '#fff',}
});
然后使用命令react-native run-android将项目运行起来。
完整的项目demo:
https://github.com/githubchl/ReactNativeDemo
注意,运行项目前。先npm install下载好项目依赖。然后打开android studio导入android目录下载好依赖,再使用react-native run-android运行项目。如果这篇博客确实帮助到你了,麻烦到github点个star。
安卓原生页面与react-native页面相互跳转实现相关推荐
- 【前端-React Native】移动端原生开发整合React Native Elements教程-安卓示例
目录 一.移动开发和web开发的区别 二.什么是React Native? 三.如何实现安卓和IOS用一套代码开发 四.React Native开发实战 1. 安装Android studio 2. ...
- vue 返回上一页传参_H5页面与微信小程序相互跳转并传参(web-view)
H5页面用vue2.全家桶写的. 一.vue代码编写vue中路由的编写 1)vue init webpack test 2)/src/router/index.js中引入路由组件 import Ind ...
- 【云原生】在 React Native 中使用 AWS Textract 实现文本提取
⭐️ 本文首发自 前端修罗场(点击加入),一个专注 Web 技术.答疑解惑.面试辅导.职业发展的社区.现在加入,即可参与打卡挑战,和一群人一起努力.挑战成功即可获取一次免费的模拟面试机会,进而评估知识 ...
- React Native之ViewPagerAndroid跳转页面问题
前言: 网上目前react-native的教程较少,加上许多帖子还是用的ES5(2015年6月已发布ES6标准),有些细节很难找到答案,这里把遇到的问题做一个分享,让学习者尽量少踩坑. 出现问题: 1 ...
- 【React Native】iOS原生导航跳转RN页面
上一篇介绍了React Native使用react-navigation进行导航跳转页面,现在我们介绍下原生iOS中怎么导航进一个新的React Native页面. 一.原生跳转React Nativ ...
- 【稀饭】react native 实战系列教程之Navigator实现页面跳转
主界面开发 上一节,我们已经完成了首页的开发,现在,我们继续完成主界面的开发,就是添加底部'首页'和'我的'两个tabbar. 在js/文件夹下,新建MainScene.js文件 import Rea ...
- android 加载静态网页,React Native:如何在WebView内加载SPA或本地静态HTML页面?
React Native:如何在WebView内加载SPA或本地静态HTML页面? React Native WebView允许你使用uri属性加载可公开访问的资源,就像程序内的一个浏览器.但是,当你 ...
- 【React Native】在原生和React Native间通信(RN调用原生)
一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...
- React Native开发指南-在原生和React Native间通信
通过植入原生应用和原生UI组件两篇文档,我们学习了React Native和原生组件的互相整合.在整合的过程中,我们会需要在两个世界间互相通信.有些方法已经在其他的指南中提到了,这篇文章总结了所有可行 ...
- React Native在美团外卖客户端的实践
MRN简介 MRN(Meituan React Native) 是基于开源的React Native框架改造并完善而成的一套动态化方案,在开发体验上基本能与原生RN保持一致,同时从业务需求的角度满足从 ...
最新文章
- 深入理解ceph-disk activate 源码逻辑
- 全球人形机器人接连突破 拟人度越来越高
- pytorch实现人脸表情识别
- android 串口通信_使用UART与ZYBO进行通信常用外设设计方案
- mysql 修改root 密码
- TCP/IP基础总结性学习(2)
- python winio_Python pywinio包_程序模块 - PyPI - Python中文网
- bzoj 1650: [Usaco2006 Dec]River Hopscotch 跳石子(二分)
- Maven项目main和test文件夹说明
- 原来这就是Java中的模板设计模式,太easy太实用了!
- 半自动化运维之服务器信息维护
- php这么把pdf转为world,php pdf如何转word
- 蓝牙耳机哪个音质好?推荐几款音质好的蓝牙耳机
- Vue使用Element UI插件
- OSChina 周二乱弹 —— 基于现代生物化学的长生不老药炼制教程
- 人名和成绩一起排序_Excel怎么按姓名笔画和拼音排序,后面的数字跟着一起变动...
- SLURM Array Job
- Linux配置ntp时间同步
- vue使用three.js加载.FBX模型文件
- Datawhale组队学习——Pytorch进阶训练技巧