将react native 集成到原生应用中的步骤：
1.创建一个空文件夹，将你的Android项目放到该目录下。
image.png
ReactNativeProject 就是项目Android名称
2.在react-native目录下创建一个package.json的文件，复制以下内容进去。
{
"name": "reactproject",
"version": "0.0.1",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-navigation": "^1.5.11"
},
"keywords": [
"123456"
],
"author": "",
"license": "ISC"
}
根据自己 react-native 版本配置
3.在react-native目录下打开终端，输入
npm install
react-native目录下会生成一个node_modules文件夹
image.png
4.在你的app中 build.gradle 文件中添加 React Native 依赖:
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
}
image.png
5.在项目的 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"
}
}
...
}
image.png
6.在 AndroidManifest.xml 清单文件中声明网络权限:
<uses-permission android:name="android.permission.INTERNET" />
如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
#######7.在react-native中创建index.js文件(注意在0.49版本之前是index.android.js文件) index.js是React Native应用在Android上的入口文件。
image.png
8.配置权限以便开发中的红屏错误能正确显示
如果你的应用会运行在Android 6.0（API level 23）或更高版本，请确保你在开发版本中有打开悬浮窗(overlay)权限。你可以在代码中使用Settings.canDrawOverlays(this);来检查。之所以需要这一权限，是因为我们会把开发中的报错显示在悬浮窗中（仅在开发阶段需要）。在Android 6.0（API level 23）中用户需要手动同意授权。具体请求授权的做法是在onCreate()中添加如下代码。其中OVERLAY_PERMISSION_REQ_CODE是用于回传授权结果的字段。
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...
}
}
}
}
image.png
9.我们还需要添加一些原生代码来启动React Native的运行时环境并让它开始渲染。首先需要在一个Activity中创建一个ReactRootView对象，然后在这个对象之中启动React Native应用，并将它设为界面的主视图。
如果你想在安卓5.0以下的系统上运行，请用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。
注意：
mReactRootView.startReactApplication(mReactInstanceManager, "DouBanMovie", null);中的第二个参数要与
index.android.js文件中的AppRegistry.registerComponent('DouBanMovie', () => App);中的第一个参数对应起来，否则会调起失败。
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.provider.Settings;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends AppCompatActivity {
private static final int OVERLAY_PERMISSION_REQ_CODE = 1000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
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);
}
}
findViewById(R.id.btn_skip).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, MyReactActivity.class);
startActivity(intent);
}
});
}
@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...
}
}
}
}
}
我们需要把 MyReactActivity 的主题设定为 Theme.AppCompat.Light.NoActionBar ，因为里面有许多组件都使用了这一主题。
<activity
android:name=".MyReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>
测试集成结果：
1.运行应用首先需要启动开发服务器（Packager）。你只需在项目根目录中执行以下命令即可：
npm start
运行项目：
image.png
点击按钮，程序崩溃，报错
image.png
解决方法
app的build.gradle中加入
ndk{
abiFilters "armeabi-v7a","x86"
}
image.png
点击按钮，报错：
image.png
确保服务器（Packager）处于开着的状态(摇一摇 唤起设置页)
image.png
image.png
image.png
输入本机IP及端口地址 （打开Charles）
bug问题：
需要注意我们得手动调到最新的文档，写这篇博客时为0.50
问题出现在
.setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android")
这里，笔者写时setJSMainModuleName这个方法已经不存在了，react native的迭代很快，我们只能用setJSMainModulePath() 这个方法替代，在这里文档中写的参数也并不正确，应该改为
.setBundleAssetName("index.bundle")
.setJSMainModulePath("index")
然后再在命令行中启用npm start
在Android Studio中打包
你也可以使用Android Studio来打release包！其步骤基本和原生应用一样，只是在每次编译打包之前需要先执行js文件的打包(即生成离线的jsbundle文件)。具体的js打包命令如下：
$ react-native bundle --platform android --dev false --entry-file index.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目录不存在，则需要提前自己创建一个。
react-native bundle --platform android --dev false --entry-file index.js --bundle-output ReactNativeProject/app/src/main/assets/index.bundle --assets-dest ReactNativeProject/app/src/main/res/
image.png
然后在Android Studio中正常生成release版本即可！
网友评论