ReactNative——集成RN到原生应用
2017-08-20 01:16
561 查看
参考资料:
Android现有工程接入RN开发
嵌入到现有原生应用 - React Native 中文网
原生模块 - React Native 中文网
现有项目接入RN简单来说分以下步骤
1.首先要有一个现成的Android 工程。
2. 安装 react-native组件。
3.在原生app 中初始化 rn 组件部分。
4.编译、运行调试程序。
下面详细步骤:
{
"name": "your project name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.3"
}
}
一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外,react-native对react的版本有严格要求,高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求,只能提醒读者先尝试执行npm install,然后注意观察安装过程中的报错信息,例如require react@某.某.某版本, but none was installed,然后根据这样的提示,执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖,可能这些第三方各自要求的react版本有所冲突,此时应优先满足react-native所需要的react版本。其他第三方能用则用,不能用则只能考虑选择其他库。
接下来我们使用npm来安装React和React Native模块。
打开一个终端/命令提示行,进入到项目目录中(即包含有package.json文件的目录),然后运行下列命令来安装:
把React Native添加到你的应用中
在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口,必须写在 "allprojects" 代码块中:
我们首先要写的是"High Score"(得分排行榜)的JavaScript端的代码。
如果你想在安卓5.0以下的系统上运行,请用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。
如果你使用的是 Android Studio , 可以使用Alt + Enter快捷键来自动为MyReactActivity类补上缺失的import语句。注意BuildConfig应该是在你自己的包中自动生成,无需额外引入。千万不要从com.facebook...的包中引入!
我们需要把 MyReactActivity 的主题设定为 Theme.AppCompat.Light.NoActionBar ,因为里面有许多组件都使用了这一主题。
下一步我们需要把一些activity的生命周期回调传递给ReactInstanceManager:
编译执行一切顺利进行之后,在进入到MyReactActivity时应该就能立刻从packager中读取JavaScript代码并执行和显示:
在Android Studio中打包
你也可以使用Android Studio来打release包!其步骤基本和原生应用一样,只是在每次编译打包之前需要先执行js文件的打包(即生成离线的jsbundle文件)。具体的js打包命令如下:
然后在Android Studio中正常生成release版本即可!
不论大神还是新手,欢迎加QQ群一起讨论问题学习技术:230274309
Android现有工程接入RN开发
嵌入到现有原生应用 - React Native 中文网
原生模块 - React Native 中文网
现有项目接入RN简单来说分以下步骤
1.首先要有一个现成的Android 工程。
2. 安装 react-native组件。
3.在原生app 中初始化 rn 组件部分。
4.编译、运行调试程序。
下面详细步骤:
开发环境准备
首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件(比如npm)。安装JavaScript依赖包
在项目根目录下创建一个名为package.json的空文本文件,然后填入以下内容:{
"name": "your project name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.3"
}
}
一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外,react-native对react的版本有严格要求,高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求,只能提醒读者先尝试执行npm install,然后注意观察安装过程中的报错信息,例如require react@某.某.某版本, but none was installed,然后根据这样的提示,执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖,可能这些第三方各自要求的react版本有所冲突,此时应优先满足react-native所需要的react版本。其他第三方能用则用,不能用则只能考虑选择其他库。
接下来我们使用npm来安装React和React Native模块。
打开一个终端/命令提示行,进入到项目目录中(即包含有package.json文件的目录),然后运行下列命令来安装:
$ npm install
把React Native添加到你的应用中
配置maven
在你的app中 build.gradle 文件中添加 React Native 依赖:dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules. }
在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口,必须写在 "allprojects" 代码块中:
allprojects { repositories { ... maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/node_modules/react-native/android" } } ... }
配置权限
接着,在 AndroidManifest.xml 清单文件中声明网络权限:<uses-permission android:name="android.permission.INTERNET" />
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码,所以在正式发布时你可以去掉这一权限。
代码集成
React Native组件我们首先要写的是"High Score"(得分排行榜)的JavaScript端的代码。
创建一个index.android.js文件
首先在项目根目录中创建一个空的index.android.js文件。index.android.js是React Native应用在Android上的入口文件。而且它是不可或缺的!它可以是个很简单的文件,简单到可以只包含一行
require/import导入语句。本教程中为了简单示范,把全部的代码都写到了
index.android.js里(当然实际开发中我们并不推荐这样做)。
添加你自己的React Native代码
在index.android.js中添加你自己的组件。这里我们只是简单的添加一个<Text>组件,然后用一个带有样式的<View>组件把它包起来。'use strict'; import React from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>Hello, World</Text> </View> ) } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);
配置权限以便开发中的红屏错误能正确显示
如果你的应用会运行在Android 6.0(API level 23)或更高版本,请确保你在开发版本中有打开悬浮窗(overlay)权限。if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (!Settings.canDrawOverlays(this)) { Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getPackageName())); startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE); } }
@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == OVERLAY_PERMISSION_REQ_CODE) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (!Settings.canDrawOverlays(this)) { // SYSTEM_ALERT_WINDOW permission not granted... } } } }
掌握核心科技:ReactRootView
我们还需要添加一些原生代码来启动React Native的运行时环境并让它开始渲染。首先需要在一个Activity中创建一个ReactRootView对象,然后在这个对象之中启动React Native应用,并将它设为界面的主视图。如果你想在安卓5.0以下的系统上运行,请用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); // 注意这里的MyReactNativeApp必须对应“index.android.js”中的 // “AppRegistry.registerComponent()”的第一个参数 mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null); setContentView(mReactRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } }
如果你使用的是 Android Studio , 可以使用Alt + Enter快捷键来自动为MyReactActivity类补上缺失的import语句。注意BuildConfig应该是在你自己的包中自动生成,无需额外引入。千万不要从com.facebook...的包中引入!
我们需要把 MyReactActivity 的主题设定为 Theme.AppCompat.Light.NoActionBar ,因为里面有许多组件都使用了这一主题。
<activity android:name=".MyReactActivity" android:label="@string/app_name" android:theme="@style/Theme.AppCompat.Light.NoActionBar"> </activity>一个
ReactInstanceManager可以在多个activities或fragments间共享。 You will want to make your own
ReactFragmentor
ReactActivityand have a singleton holder that holds a
ReactInstanceManager. When you need the
ReactInstanceManager(e.g., to hook up the
ReactInstanceManagerto the lifecycle of those Activities or Fragments) use the one provided by the singleton.
下一步我们需要把一些activity的生命周期回调传递给ReactInstanceManager:
@Override protected void onPause() { super.onPause(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostPause(this); } } @Override protected void onResume() { super.onResume(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostResume(this, this); } } @Override protected void onDestroy() { super.onDestroy(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostDestroy(); } }我们还需要把后退按钮事件传递给React Native:
@Override public void onBackPressed() { if (mReactInstanceManager != null) { mReactInstanceManager.onBackPressed(); } else { super.onBackPressed(); } }
@Override public boolean onKeyUp(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { mReactInstanceManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode, event); }
测试集成结果
1. 运行Packager
运行应用首先需要启动开发服务器(Packager)。你只需在项目根目录中执行以下命令即可:$ npm start
2. 运行你的应用
保持packager的窗口运行不要关闭,然后像往常一样编译运行你的Android应用(在命令行中执行./gradlew installDebug或是在Android Studio中编译运行)。编译执行一切顺利进行之后,在进入到MyReactActivity时应该就能立刻从packager中读取JavaScript代码并执行和显示:
在Android Studio中打包
你也可以使用Android Studio来打release包!其步骤基本和原生应用一样,只是在每次编译打包之前需要先执行js文件的打包(即生成离线的jsbundle文件)。具体的js打包命令如下:
$ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/注意把上述命令中的路径替换为你实际项目的路径。如果assets目录不存在,则需要提前自己创建一个。
然后在Android Studio中正常生成release版本即可!
不论大神还是新手,欢迎加QQ群一起讨论问题学习技术:230274309
相关文章推荐
- React Native学习笔记之--向原生应用中集成RN页面
- Android原生应用集成ReactNative坑总结
- React Native 教程——集成到现有原生应用
- IOS与React Native混编,将RN框架使用CocoaPods集成到原生项目中
- 将React Native集成至Android原生应用
- React-Native与iOS原生的集成步骤
- React Native 集成原生极光JMessage 踩坑
- React Native:使用 JavaScript 构建原生应用 详细剖析
- React Native应用部署/热更新-CodePush最新集成总结(新)
- react native之原生和RN的交互
- React Native应用部署/热更新-CodePush最新集成总结(新)
- 最新iOS原生项目集成React-Native
- Android在原生集成react native
- 原生Android项目中集成React native页面
- React Native植入原生Android应用的流程解析
- React Native 中实现原生android集成微信支付
- React Native打造原生应用之环境搭建
- 原生、混合、react-native应用对比分析
- 集成React Native到现有原生app的方法
- react-native + as <react-native嵌入原生应用开发>