在原生android应用中引入React Native

参考链接 : http://facebook.github.io/react-native/docs/integration-with-existing-apps.html

系统环境 : mac book pro , mac OS Sierra 10.12.6,需自己安装npm

1.新建项目ReactNativeIn

新建一个ReactNativeIn文件夹，在ReactNativeIn文件夹下，新建一个android文件夹，然后将原有android项目中所有文件拷贝到android文件夹下

2.在ReactNativeIn目录下新建package.json文件

打开终端，cd到ReactNativeIn目录下，使用命令npm init，然后根据终端提示一步一步输入完需要的信息，注意name里不能输入大写字母，最后生成的paceage.json文件内容：

{
  "name": "reactnativein",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native"
  ],
  "author": "sjg",
  "license": "ISC"
}

3.安装react native

打开终端，cd到ReactNativeIn目录下，使用命令 npm install --save react react-native,安装如果成功完成，

会生成一个目录node_modules

4.添加react native依赖

用android studio打开项目，在app目录里的build.gradle里添加react native依赖

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

在项目的build.gradle里添加

allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

5.修改AndroidManifest.xml

添加Internet权限

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

添加DevSettingsActivity

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

6.新建react-native页面

在ReactNativeIn目录下新建index.android.js文件，将下面代码拷贝进去

'use strict';

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

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

AppRegistry.registerComponent('ReactNativeIn', () => Hello);

7.修改MainActivity及布局文件内容

MainActivity:

public class MainActivity extends AppCompatActivity {
    ReactRootView rootView;
    ReactInstanceManager instanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rootView  = (ReactRootView) findViewById(R.id.rr_root);
        instanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        rootView.startReactApplication(instanceManager, "ReactNativeIn", null);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && instanceManager != null) {
            instanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}
activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.jigangsun.reactnativein.MainActivity"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
    <com.facebook.react.ReactRootView
        android:id="@+id/rr_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.facebook.react.ReactRootView>
</LinearLayout>


8.让react native应用运行起来

终端cd到ReactNativeIn目录下，使用react-native start运行react packager,

运行成功后会看到如下页面

在android studio里运行项目，运行之后界面：

9.可能会遇到的坑

undefined is not an object (evaluating 'ReactInternals.ReactCurrentOwner')
将你package.json文件里的react版本改为16.0.0-alpha.12

java.lang.UnsatisfiedLinkError: dlopen failed: "/data/data/com.example.jigangsun.reactnativein/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit
修改app中build.gradle文件添加如下代码
android {
    ...
    defaultConfig {
        ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
}

java.lang.IllegalAccessError: Method 'void android.support.v4.net.ConnectivityManagerCompat.()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule' (declaration of 'com.facebook.react.modules.netinfo.NetInfoModule' appears in /data/app/package.name-2/base.apk)
com.android.support:appcompat-v7版本使用23.1.1并且修改相应的compileSdkVersion