ReactNative之原生模块开发并发布——Android篇
招聘信息：
/blog//reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-androidpian/
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量7896点击量7868点击量6839点击量6660点击量6366点击量6358点击量5868点击量5369点击量5233
&2016 Chukong Technologies,Inc.
京公网安备89【React Native】嵌入原生app之踩坑Android篇_iOS开发_动态网站制作指南
【React Native】嵌入原生app之踩坑Android篇
来源：人气：535
在oject中集成React Native
step1 在Project的目录下面运行 npm
pengcx@pengcx-:~/AndroidStudioProjects/ReactNativeTest$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install &pkg& --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (ReactNativeTest) node_modules
Sorry, node_modules is a blacklisted name.
name: (ReactNativeTest) react_native
version: (1.0.0)
descrtion:
entry point: (index.js)
test command: make test
git repository:
license: (ISC)
About to write to /home/pengcx/AndroidStudioProjects/ReactNativeTest/package.json:
"name": "react_native",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "make test"
"author": "",
"license": "ISC"
Is this ok? (yes) yes
step 2 运行如下命令
npm install --save react react-native
curl -o .flowconfig /facebook/react-native/master/.flowconfig
在Package.json的文件中的script节点下，添加如下代码。text的节点后加上逗号
"start": "node node_modules/react-native/local-cli/cli.js start"
step 4 首先在项目根目录中创建index.android.js文件，代码如下所示
'use strict';
import React from 'react';
AppRegistry,
StyleSheet,
} from 'react-native';
class HelloWorld ponent {
render() {
&View style={styles.container}&
&Text style={styles.hello}&Hello, World&/Text&
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
fontSize: 20,
textAlign: 'center',
margin: 10,
AppRegistry.registerComponent('HelloWorld', () =& HelloWorld);
//这里的名字不需要与Package.json的项目名称一致
step 5 在app的gradle文件中添加ReactNative的依赖，如下所示
dependencies {
compile "com.facebook.react:react-native:+" // From node_modules.
step 6 在Project的gradle文件中，添加ReactNative的本地maven目录，具体如下
allprojects {
repositories {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
在AndroiMainfest.文件中添加如下代码
&uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /&
&uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" /&
&!-- 添加RN的调试Activity --&
&activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /&
&/application&
step 8 添加Android代码
public class RNActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootV
private ReactInstanceManager mReactInstanceM
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)
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
protected void onPause() {
super.onPause();
protected void onResume() {
super.onResume();
protected void onDestroy() {
super.onDestroy();
We also need to pass back button events to React Native:
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
super.onBackPressed();
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return super.onKeyUp(keyCode, event);
//如果你的项目名字不是叫“HelloWorld”，则需要将“index.android.js”中的“AppRegistry.registerComponent()”方法中的第一个参数替换为对应的名字。
- step 9 清单文件中配置
&activity android:name=".RNActivity"&&/activity&
- step 10 运行 react-native start命令
dst56728:MyApplication CARCH$ react-native start
Scanning 430 folders for symlinks in /Users/CARCH/android/MyApplication/node_modules (156ms)
┌────────────────────────────────────────────────────────────────────────────┐
Running packager on port 8081.
Keep this packager running while developing on any JS projects. Feel
free to close this tab and run your own packager instance if you
/facebook/react-native
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/CARCH/android/MyApplication
Loading dependency graph...
React packager ready.
Loading dependency graph, done.
Bundling `index.android.js`
Transforming modules
100.0% (390/390), done.
Bundling `index.android.js`
Updating 1 module in place, done
Bundling `index.android.js`
No module changed.
Bundling `index.android.js`
No module changed.
楼主遇到的问题
libgnustl_shared.so” is 32-bit instead of 64-bit报错问题
abiFilters "armeabi-v7a", "x86"
packagingOptions {
exclude "lib/arm64-v8a/librealm-jni.so"
安卓嵌入react native 环境的步骤，Could not get BatchedBridge, make sure your bundle is packaged correctly问题的解决
首先确认手机的网和电脑的网在不在同一网段。
然后需要查看React Packger是否Loading Js 文件。
设置Dev Setting的ip地址以及网段。
优质网站模板Android原生嵌入React Native 过程中遇见的各种坑
首先说说情况吧，公司需要原生嵌入ReactNative，迫于需要，要搞起来。看着iOS就搞了20分钟，感觉Android就算麻烦也不能太麻烦的，结果还是自己太年轻了。下面就是我遇到的各种问题，希望对看到的朋友能有帮助
（我用的是ReactNative版本为0.32.0）
1.首先集成的项目目录
我使用的是直接按照react-native&init&Project&的格式来导入的，也就是说，我的
Android项目目录是跟node_modules是在一个目录下的。
我试过把node_modules集成在Android项目下面的情况，不过没有弄成，所以我换乘来
这种了（有时间可以再试试）
2.第二步就是跟官网和很多教程一样的配置环境了
2.1&在我们Android项目的build.gradle中添加React&Native依赖，然后同步，具体代码如下:
compile 'com.facebook.react:react-native:0.32.0'
在此说一下，我也是忘记在哪个大神博客下看的了，如果版本写的是“＋”的话，下载的react&native版本就是0.20.0的版本，会报一个错，就是版本不符合的错误，“Module&0&is&not&a&registered&callable&moudle”,这个Google了一下，说是reactnative版本跟服务器的版本不符合，改正了就按着我的步骤三的第一种方法做就可以了，注释掉第三个重写的方法。
2.2紧接着我们需要在项目AndroidManifest.xml中加入网络访问权限
&uses-permission android:name=&android.permission.INTERNET& /&
还有一个activity就是设置菜单，发现好多里面都没有，我就先放在这里了
&activity android:name=&com.facebook.react.devsupport.DevSettingsActivity& /&
2.3&在android/build.gradle文件中（注意跟上面的路径不同）加入本地React Native的maven目录(现在React Native的所有组件,无论JS还是Android的预编译包，都是通过npm分发的了):
我是在两个 &&& & & & jcenter() & &后面都添加了这个方法
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url &$rootDir/../node_modules/react-native/android&
3.在Activity中添加代码
这里有两种方法都是可以加载的。
public class MainActivity extends ReactActivity {
protected String getMainComponentName() {
return &&span style=&font-family: &Helvetica Neue&, Helvetica, Arial, &Lucida Grande&, &Hiragino Sans GB&, 微软雅黑, &WenQuanYi Micro Hei&, STHeiti, SimSun, sans- line-height: 2&&MyAwesomeApp&/span&&span style=&line-height: 2 font-family: &Helvetica Neue&, Helvetica, Arial, &Lucida Grande&, &Hiragino Sans GB&, 微软雅黑, &WenQuanYi Micro Hei&, STHeiti, SimSun, sans-&&&;&/span&
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
protected List&ReactPackage& getPackages() {
return Arrays.&ReactPackage&asList(
new MainReactPackage()
由于我使用的是第0.32.0版本的react native，所以运行的时候，最后一个重写的方法会报错的，于是就注释掉了，但是不要担心，getPackages方法写到MainApplication里就可以了
public class MainApplication extends
Application implements ReactApplication {
public ReactNativeHost getReactNativeHost() {
ReactNativeHost host =
if (host==null){
host = new ReactNativeHost(context) {
protected boolean getUseDeveloperSupport() {
protected List&ReactPackage& getPackages() {
return Arrays.&ReactPackage&asList(
new MainReactPackage(),
new IntentReactPackage()
如果不写的话，会有一个Application强转错误的
public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootV
private ReactInstanceManager mReactInstanceM
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//创建一个ReactRootView，把它设置成Activity的主视图
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)
mReactRootView.startReactApplication(mReactInstanceManager, &MyAwesomeApp&, null);
setContentView(mReactRootView);
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
//传递一些Activity的生命周期事件到ReactInstanceManager，这是的JavaScript代码可以控制当前用户按下返回按钮的时候作何处理（譬如控制导航切换等等）。如果JavaScript端不处理相应的事件，你的invokeDefaultOnBackPressed方法会被调用。默认情况，这会直接结束你的Activity。
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this,this);
public void onBackPressed() {
mReactInstanceManager.showDevOptionsDialog();
Toast.makeText(this, &dianjialefanhuijian&, Toast.LENGTH_SHORT).show();
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
super.onBackPressed();
//我们需要改动一下开发者菜单。默认情况下，任何开发者菜单都可以通过摇晃或者设备类触发，不过这对模拟器不是很有用。所以我们让它在按下Menu键的时候可以显示
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return super.onKeyUp(keyCode, event);
我开始使用的是第一种，但是后来发现使用第一种的话，最后运行的话只能打包固定的代码，并不能实现热更新（毕竟新手，没有发现这么搞），所以果断改第二种了，修改js文件直接就能reload实现了，非常的嗨
4.添加react native包
这就比较简单了，看了好多的文档都是这么写的，也可以直接从init 的项目里拷过来就好，或者按着官方的来就好
$ npm init
跟着步骤回车就好了，然后好像输入个yes
然后就发现有了一个package.json文件
&name&: &testRN&,
&version&: &1.0.0&,
&description&: &&,
&main&: &index.js&,
&scripts&: {
&start&: &node node_modules/react-native/local-cli/cli.js start&
&author&: &&,
&license&: &ISC&,
&dependencies&: {
&react&: &15.3.1&,
&react-native&: &^0.32.0&
}千万要记住，这个里面的react－native版本一定要和前面gradle的版本一样，不然就出现了那个“Module &0”的版本不一致的错误了，这个错误就看第三步的方法一就好了
然后就是 npm install ，导入react包了
然后就是 &&
curl -o .flowconfig&&
做一下flow配置 & &虽然现在不知道是为了什么，但是每个人都这么做
5.添加Js代码
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
ToastAndroid
} from 'react-native';
var { NativeModules } = require('react-native');
class MyAwesomeApp extends Component {
constructor(props) {
super(props);
render() {
&Text&哈哈哈哈哈哈哈哈&/Text&
AppRegistry.registerComponent('MyAwesomeApp', () =& MyAwesomeApp);
6.运行Demo
开开reactnative的服务器，npm start
在studio中运行demo，会发现，出现一行“哈哈哈哈”
注：可能会出现java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctly这个错误，Google就有解决方法，就是在命令行里运行
react-native bundle —platform android —dev false —entry-file index.android.js —bundle-output MyYhao/app/src/main/assets/index.android.bundle —sourcemap-output MyYhao/app/src/main/assets/index.android.map —assets-dest MyYhao/app/src/main/res/react-native bundle —platform android —dev false —entry-file index.android.js —bundle-output MyYhao/app/src/main/assets/index.android.bundle —sourcemap-output MyYhao/app/src/main/assets/index.android.map —assets-dest MyYhao/app/src/main/res/
注意assets的目录，我是在里面直接新建了index.android.bundle和index.android.map两个空文件，然后运行的，会自动往里面写入代码，然后运行就可以了
本人第一次写这些自己的经验，有不足之处，希望大家海涵，因为是后来写的，有些东西可能还是忘记了，如果有碰到什么问题的话，可以直接回复，谢谢
我在自己做的时候，也参考了好多大神的文章，都有很大帮助，他们的文章都在百度的前几个，所以也好找，
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
关注云计算OpenStack、Docker、SaaS领域
生死看淡，不服就干！
优秀设计开发设计资源分享
Hope is a good thing,maybe the best of things!
这是一个不断踩坑的过程。。。}