React Native 教程——集成到现有原生应用
2017-10-18 11:22
639 查看
开发环境准备
首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件(比如npm)。!!!
1. 设置项目目录结构
首先创建一个空文件夹(名字英语就行),然后把自己的原有项目放进来就行。!!!
2. 安装JavaScript依赖包
在项目根目录(就是在刚创建的空文件夹下、和Android项目同一级别)下创建一个名为package.json的空文本文件,然后填入以下内容:
(也可以使用命令符创建 : cd 文件夹名进入根目录,然后输入:npm init 按回车,就可以一行一行输入数据)
{ "name": "MyReactNativeApp", "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" } }
示例中的
version字段没有太大意义,name很重要!!!记住这个名字!!!(好像大写会报错)。本文无法在这里列出所有react
native和对应的react版本要求,只能提醒读者先尝试执行npm install,然后注意观察安装过程中的报错信息,例如
require react@某.某.某版本, but none was installed,然后根据这样的提示,执行
npm i -S react@某.某.某版本。如果你使用多个第三方依赖,可能这些第三方各自要求的react版本有所冲突,此时应优先满足
react-native所需要的
react版本。
本人在这一段踩的是name的值大写、txt文本编辑时“”(双引号)会提示格式错误。只要这个配合没啥格式上的毛病就可以进行下一步了。
接下来我们使用npm(node包管理器,Node package manager)来安装React和React Native模块。 请打开一个终端/命令提示行,进入到项目目录中(即包含有package.json文件的目录),然后运行下列命令来安装:
$ npm install
这些模块会被安装到项目根目录下的
node_modules/目录中(所有通过npm install命令安装的模块都会放在这个目录中。这个目录我们原则上不复制、不移动、不修改、不上传,随用随装)。
把React Native添加到你的应用中
配置maven
用Android studio打开你的项目(就是单纯的打开项目就行),然后在 build.gradle文件中添加 React Native 依赖:
dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules. }
如果想要指定特定的React Native版本,可以用具体的版本号替换
+,当然前提是你从npm里下载的是这个版本
。
在项目的
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" } } ... }
确保依赖路径的正确!以免在 Android Studio 运行Gradle同步构建时抛出 “Failed to resolve: com.facebook.react:react-native:0.x.x" 异常。
配置权限
接着,在 AndroidManifest.xml清单文件中声明网络权限:
<uses-permission android:name="android.permission.INTERNET" />
如果需要访问
DevSettingsActivity界面(即真机摇晃出开发者菜单),则还需要在
AndroidManifest.xml中声明:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码,所以在正式发布时你可以去掉这一权限。
集成代码
1. 创建一个
index.android.js文件
首先在项目根目录中创建一个空的
index.android.js文件。
index.android.js是React
Native应用在Android上的入口文件。而且它是不可或缺的!它可以是个很简单的文件,简单到可以只包含一行
require/import导入语句。本教程中为了简单示范,把全部的代码都写到了
index.android.js里(当然实际开发中我们并不推荐这样做)。
2. 添加你自己的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);
3、创建MyReactActivity
如果你想在安卓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语句。
我们需要把
MyReactActivity的主题设定为
Theme.AppCompat.Light.NoActionBar,因为里面有许多组件都使用了这一主题。
<activity android:name=".MyReactActivity" android:label="@string/app_name" android:theme="@style/Theme.AppCompat.Light.NoActionBar"> </activity>
下一步我们需要把一些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); }
配置权限以便开发中的红屏错误能正确显示
如果你的应用会运行在Android 6.0(API level 23)或更高版本,请确保你在开发版本中有打开
悬浮窗(overlay)权限。If
your app is targeting the Android
API level 23or greater, make sure you
have the
overlaypermission enabled for the development build. You can
check it with
Settings.canDrawOverlays(this);. This is required in dev
builds because react native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23, the user needs to approve it. This can be acheived by adding the following code to the Activity
file in the onCreate() method. OVERLAY_PERMISSION_REQ_CODE is a field of the class which would be responsible for passing the result back to the Activity.
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, 0); } }
Finally, the
onActivityResult()method (as shown in the code below) has
to be overridden to handle the permission Accepted or Denied cases for consistent UX.
@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == 0) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (!Settings.canDrawOverlays(this)) { // SYSTEM_ALERT_WINDOW permission not granted... } } } }
现在activity已就绪,可以运行一些JavaScript代码了。
测试集成结果#
You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the index.android.bundlepackage
and the server running on localhost to serve it.
1. 运行Packager
运行应用首先需要启动开发服务器(Packager)。你只需在项目根目录中执行以下命令即可:
$ npm start
2. 运行你的应用
保持packager的窗口运行不要关闭,然后像往常一样编译运行你的Android应用(在命令行中执行
./gradlew installDebug或是在Android
Studio中编译运行)。
如果你是使用Android Studio来编译运行,有可能会导致packager报错退出。这种情况下你需要安装watchman。但是watchman目前没有稳定的Windows版本,所以在Windows下这种崩溃情况暂时没有特别好的解决方案。
编译执行一切顺利进行之后,在进入到MyReactActivity时应该就能立刻从packager中读取JavaScript代码并执行和显示:
在Android Studio中打包
Android studio正常的打包流程就行,如果第一次打包需要创建签名文件,可以看这里:Android Studio 生成签名文件OK,到此我们已经生成APK。 一安装APK运行发现APK直接BOOM。
为什么?????
因为平时DEBUG模式下链接的是我们本地的服务器拉去的JS文件,此时的APK包并没有将JSBundle打入APK。
接下来,我们将JS(即生成离线的jsbundle文件)资源等一起打入APK。
具体的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目录不存在,则需要提前自己创建一个。
创建assets
进入项目主目录 执行命令 mkdir -p android/app/src/main/assets
此刻我们将在main目录下生成assets文件夹,用于存储index.android.bundle…
index.android.bundle是什么???
用于存储JS的本地文件,我们打的离线包将从其中读取资源等。
第二步:生成index.android.bundle文件
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
OK! 文件生成,我们在重新执行一次Android Studio的打包流行,安装APK 即可运行离线包。
然后在Android Studio中正常生成release版本即可!
相关文章推荐
- Android原生应用集成ReactNative坑总结
- 集成React Native到现有原生app的方法
- ReactNative——集成RN到原生应用
- 将React Native集成至Android原生应用
- iOS 集成React Native到现有iOS应用(Ficow本人实测,Xcode 8.3,iOS 10.3)
- React Native学习笔记之--向原生应用中集成RN页面
- React Native 集成到原生项目(iOS)
- React Native 集成原生极光JMessage 踩坑
- React Native 教程 demo1 认识js与app原生控件
- ReactNative如何在JS中引用原生自定义控件(rn变化太快,网上很多教程有坑,这个我研究后可用,特意分享)
- React-native植入原生Android应用
- React-Native学习笔记——正确集成到现有Android工程中
- ReactNative 应用于原生应用 踩坑
- React Native 集成到 Android 原生项目中踩坑记录 (Didn't find class "com.facebook.jni.IteratorHelper")
- 2.android 原生应用和React native 结合开发.环境搭建
- ios原生集成React Native
- Android 原生应用嵌入React-Native模块开发-环境配置及填坑记
- React Native 0.35植入Android 原生应用。
- 在Windows上将ReactNative集成到现有的Android项目
- 在Windows上将ReactNative集成到现有的Android项目