React Native嵌入Android原生项目中

React Native嵌入Android原生项目中

开发环境准备

首先你要搭建好React Native for Android开发环境， 没有搭建好的可以参考：React Native for Android Windows环境搭建

用Android Studio新建Android原生项目

我创建了一个名叫ReactNativeDemo的原生项目。

把React Native集成到原生项目当中

利用Windows命令行在项目根目录(ReactNativeDemo文件夹)下执行下面三行命令：

npm init
npm install --save react react-native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

这将在项目根目录(ReactNativeDemo文件夹)创建node_modules文件夹(模块)，并添加React Native依赖。

针对上面三条命令的解释

npm init



注意:
name的填写由图可知填默认的是不行的，它的要求是不能有大写字母并且不能以数字开头；
entry point的填写入口文件名称，默认的是index.js，我们建立的入口文件是index.android.js，所以填写index.android.js。只要填写的名称与自己定义的入口文件名称一致就行。
其他的项根据自己需求填写即可。

这个步骤会在项目的根目录产生一个名称为package.json的文件，我们还需要修改我们的package.json文件：
在"scripts"节点下添加"start": "node node_modules/react-native/local-cli/cli.js start"。

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }

其中的test节点是自动生成的，我们可以把它删除，最后我的package.json为：

{
  "name": "reactnativedemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.android.js",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-native": "^0.38.0"
  }
}

npm install --save react react-native



curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

curl是利用URL语法在命令行方式下工作的开源文件传输工具。它被广泛应用在Unix、多种Linux发行版中，并且有DOS和Win32、Win64下的移植版本。
所以可知上面这句话的意思是在对应网址下下载.flowconfig文件。
在windows下我们要使用curl命令会提示:curl不是内部和外部命令，也不是可执行文件或批处理命令。。。
我们在windows下要使用curl命令比较麻烦。解决方法就是我们用下载工具从https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 上把.flowconfig下载下来复制到项目根目录，或者是在项目根目录下新建一个.flowconfig文件用浏览器访问这个网址其中的内容把其中的内容复制到文件当中。

建立index.android.js文件

在项目的根目录建立index.android.js文件并把下面的代码复制进去：

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class Root extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Welcome!</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('ReactNativeView', () => Root);

添加依赖

在项目的根目录的build.gradle中加入：

allprojects {
    repositories {
        jcenter()
        maven {
            //添加react native依赖，url路径根据实际的来写，本文的如下：
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

注意：Android项目默认的依赖包的源为jcenter()，其中并不包含最新版的 React Native（它只到0.20.1）。
新版的React Native只在npm里发布，所以你需要增加一下依赖包的源。在编译完后，检查项目External Libraries的
react-native版本如果为0.20.1，则说明maven的依赖源没有添加成功。这时候应该是maven的路径出问题了，你要检查
路径是否正确，正确的结果为：

在项目的模块(app)中的build.gradle文件中添加：
文件头添加（可选）：

apply from: "$rootDir/node_modules/react-native/react.gradle"

无法编译通过的时候可以尝试添加上面这句。

 dependencies {
     ...
     compile "com.facebook.react:react-native:+"
 }

如果你想总是使用一个特定的版本，你需要把+替换成你已经下载的React Native的版本号，
这个版本号应该与package.json中的react-native的版本号("react-native": "^0.38.0")一致的。如本例中的0.38.0：

 dependencies {
     ...
     compile "com.facebook.react:react-native:0.38.0"
 }

添加原生Activity文件：

官方教程的写法：

MyReactActivity

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.BuildConfig;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

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") //对应index.android.js
                .addPackage(new MainReactPackage())
                //.setUseDeveloperSupport(BuildConfig.DEBUG) //开发者支持，BuildConfig.DEBUG的值默认是false，无法使用开发者菜单
                .setUseDeveloperSupport(true) //开发者支持,开发的时候要设置为true，不然无法使用开发者菜单
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        //这里的ReactNativeView对应index.android.js中AppRegistry.registerComponent('ReactNativeView', () => ReactNativeView)的ReactNativeView
        mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeView", null);
        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @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(this);
        }
    }

    @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);
    }
}

<font color="#EF7A7A">注意：</font>

官方教程的写法中这里：

 @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") //对应index.android.js
            .addPackage(new MainReactPackage())
            //.setUseDeveloperSupport(BuildConfig.DEBUG) //开发者支持，BuildConfig.DEBUG的值默认是false，无法使用开发者菜单
            .setUseDeveloperSupport(true) //开发者支持,开发的时候要设置为true，不然无法使用开发者菜单
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    //这里的ReactNativeView对应index.android.js中AppRegistry.registerComponent('ReactNativeView', () => ReactNativeView)的ReactNativeView
    mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeView", null);
    setContentView(mReactRootView);
}

的setUseDeveloperSupport(BuildConfig.DEBUG)方法，设置开发者支持，BuildConfig.DEBUG的值默认是false，无法使用开发者支持（开发者菜单、即时预览等），所以我们要把BuildConfig.DEBUG改为true。

另一种原生Activity写法

MyReactNativeActivity

import com.facebook.react.ReactActivity;

public class MyReactNativeActivity extends ReactActivity {
    /**
     * 这里的ReactNativeView对应index.android.js中AppRegistry.registerComponent('ReactNativeView', () => Root)的ReactNativeView
     */
    @Override
    protected String getMainComponentName() {
        return "ReactNativeView";
    }
}

两种原生Activity写法的对比：

第一种（官方例子的）

这种写法的优势是可以利用React Native来写我们界面中的某一块区域，就是利用原生布局的addView()方法把mReactRootView加入到布局中，比如：

activity_my_react.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#9DB16D"
        android:textSize="40sp"
        android:text="原生控件TextView" />

    <LinearLayout
        android:id="@+id/layout"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

MyReactActivity修改

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my_react);
    mReactLayout = (LinearLayout) findViewById(R.id.layout);

    mReactRootView = new ReactRootView(this);
    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModuleName("index.android")//对应index.android.js
            .addPackage(new MainReactPackage())
            //.setUseDeveloperSupport(BuildConfig.DEBUG) //开发者支持，BuildConfig.DEBUG的值默认是false，无法使用开发者菜单
            .setUseDeveloperSupport(true) //开发者支持,开发的时候要设置为true，不然无法使用开发者菜单
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    //这里的ReactNativeView对应index.android.js中AppRegistry.registerComponent('ReactNativeView', () => Root)的ReactNativeView
    mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeView", null);
    mReactLayout.addView(mReactRootView);
}

index.android.js

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet
} from 'react-native'

export default class Root extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>React Native组件</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#65A35F',
  },
  welcome: {
    fontSize: 40,
    textAlign: 'center',
    margin: 10,
  }
});

AppRegistry.registerComponent('ReactNativeView', () => Root);

第二种

这种方式是优势是写法简单。但是无法局部使用React Native来布局。

AndroidManifest.xml相关

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="top.cokernut.reactnativetonative">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
        android:allowBackup="true"
        android:name=".MyApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".MyReactActivity"
            android:label="MyReactActivity">
        </activity>
        <activity
            android:name=".MyReactNativeActivity"
            android:label="MyReactNativeActivity"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

网络权限：

<uses-permission android:name="android.permission.INTERNET" />

悬浮窗权限：

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

有悬浮窗权限才能显示：

如果遇到React Native的一些组件不能使用可以尝试在注册Activity时添加主题为Theme.AppCompat.Light.NoActionBar，看能否解决问题，因为一些组件依赖于这个主题:

<activity
    android:name=".MyReactNativeActivity"
    android:label="@string/app_name"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>

开发设置界面：

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

运行应用

启动开发服务器

在项目的根目录下运行：

npm start

这个命令运行的是我们package.json中配置的：

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android 看看是否可以看到打包后的脚本。
第一次访问通常需要十几秒，并且在命令行可以看到进度条。

构建与运行你的程序

两种方法：

  1. 直接利用Android Studio像平常一样运行项目
  2. 在命令行中项目目录下运行gradlew installDebug

如果你使用的是Android Studio为你构建而不是Gradle构建(gradlew installDebug)，你要确保你在安装应用之前运行了npm start，以防止它们之间出现冲突。
效果：

MyReactActivity:

MyReactNativeActivity:

在Android Studio中打包成独立安装程序（release）

你可以使用Android Studio来创建你的App的发布版本！像以前创建原生应用程序的发布版本一样简单，只是有一个额外步骤：
在你打包你的发布版本之前要创建一个bundle文件，这个bundle文件会创建在项目的assets目录中，并且这个文件会包含在你的apk包中，
在你的项目根目录中运行：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

app/src/main根据实际情况改为自己项目中的目录，参考assets文件夹的目录。


结果为：

如果报错：

ENOENT: no such file or directory

你需要在你的app模块中建立assets文件夹和index.android.bundle。

现在你可以对你的应用程序进行打包发布了。

debug模式release模式React Native JS代码调试的区别:

debug模式: 修改完js代码打开开发者菜单点击Reload就可以看到更新后的效果，或者是开启Live Reload(点击Enable Live Reload)
这样我们修改了js文件只要保存就会自动Reload。
release模式: 修改完js代码需要重新生成index.android.bundle 文件，点击run之后才能看到效果。因为正式版发布后是无法
依赖本地服务器去更新index.android.bundle，需要把index.android.bundle打包到apk中才能运行。

更新React Naive版本

1.打开项目目录下的package.json文件，然后在dependencies模块下找到react-native，将当前版本号改到最新（或指定）版本号，如：

{
"name": "reactnativedemo",
"version": "1.0.0",
"description": "",
"main": "index.android.js",
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
},
"author": "",
"license": "ISC",
"dependencies": {
    "react": "^15.4.1",
    "react-native": "^0.38.0"
}
}

react-native的npm包的最新版本可以去这里查看，或使用npm info react-native命令查看。

2.项目的根目录执行：

npm install

安装最新的React Native版本,成功后可能会出现如下类似警告：

npm WARN react-native@0.38.0 requires a peer of react@15.4.1 but none was installed.

3.根据警告执行：

npm install –save react@15.4.1

更新最新的React且项目下package.json 的 dependencies下的react版本会被修改为 15.4.1

4.新版本的npm包通常还会包含一些动态生成的文件，这些文件是在运行react-native init创建新
项目时生成的，比如iOS和Android的项目文件。为了使老项目的项目文件也能得到更新
（不重新init），你需要在命令行中运行：

react-native upgrade

这一命令会检查最新的项目模板，然后进行如下操作：

  • 如果是新添加的文件，则直接创建。
  • 如果文件和当前版本的文件相同，则跳过。
  • 如果文件和当前版本的文件不同，则会提示你一些选项：查看两者的不同，选择保留你的版本或是用新的模板覆盖。你可以按下h键来查看所有可以使用的命令。

注意：如果你有修改原生代码，那么在使用upgrade升级前，先备份，再覆盖。覆盖完成后，使用比对工具找出差异，将你之前修改的代码逐步搬运到新文件中。

5.执行：

react-native -v

通过如上命令来看最新的版本，检测是否升级成功！

问题与解决方案

打不开开发者菜单

查看AndroidManifest.xml文件中是否加入了悬浮窗权限：

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

并且你要在手机上开启你要调试的应用的悬浮窗权限，不同的手机开启方式不同，可以自行搜索开启方法。

错误 "/data/data/package-name/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit

取消掉所有的64位的.so文件，全部加载32位的.so文件。

  1. 在项目的根目录的build.gradle中加入：

android.useDeprecatedNdk=true.

  1. 在项目的模块(app)中的build.gradle文件中添加:
android {
    ...
    defaultConfig {
        ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }

        packagingOptions {
            exclude "lib/arm64-v8a/librealm-jni.so"
        }
    }
}

错误：Could not get BatchedBridge,make sure your bundle is packaged correctly

  1. build模式选择了release模式，引发的这个错误，你可以检查一下是否是debug模式，如果不是改为debug再试一下。
  2. ReactInstanceManager的setUseDeveloperSupport(BuildConfig.DEBUG)方法值是否正确，设置开发者支持，BuildConfig.DEBUG的值默认是false，无法使用开发者支持（开发者菜单、即时预览等），所以我们要把BuildConfig.DEBUG改为true。

错误

解决方法：

把Android Studio自动生成的文件夹androidTest和test删除，并修改项目的模块(app)的build.gradle文件：

修改前：

修改后：

其他问题可以参考React Native for Android Windows环境搭建

<font size=5>源代码</font>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 161,873评论 4赞 370
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 68,483评论 1赞 306
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 111,525评论 0赞 254
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,595评论 0赞 218
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 53,018评论 3赞 295
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,958评论 1赞 224
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 32,118评论 2赞 317
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,873评论 0赞 208
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,643评论 1赞 250
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,813评论 2赞 253
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,293评论 1赞 265
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,615评论 3赞 262
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,306评论 3赞 242
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,170评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,968评论 0赞 201
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 36,107评论 2赞 285
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,894评论 2赞 278

推荐阅读更多精彩内容