Android项目集成React-Native

React社区生态圈的加持和Facebook的大力推广后，react native貌似声望颇高。近日得闲，于是想学习学习。类似weex基于三端统一，减少开发成本，RN+原生混合开发，这将是一个不错的选择。

在这之前找了很多资料，但很多并没有走通，填填补补的一路走来费了不少时间，所以写了这篇博客，希望能帮助需要的童鞋。

还没配置环境的童鞋可以到这里去配置环境：环境搭建

环境配置了就一步一步往下走：

1 在你的app中 build.gradle 文件中添加 React Native 依赖：
 compile "com.facebook.react:react-native:+" 
2 在你的app中 build.gradle的android的defaultConfig中添加 so库：
ndk {

abiFilters "armeabi-v7a" , "x86"

}

3 在工程目录下找到工程的 build.gradle文件中，添加 maven依赖：
maven {

// All of React Native (JS, Android binaries) is installed from npm

// url "$rootDir/../node_modules/react-native/android"

// build.gradle文件和node_modules目录都是在根目录下面，所以需要把改成下面的形式:

url " $ rootDir /node_modules/react-native/android"

}

4 清单文件设置权限：
<uses-permission android :name= "android.permission.INTERNET" />

/**设置调试的权限**/

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

清单文件注册DevSettingsActivity：
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
5 开打Terminal输入命令:

npm init 生成package.json文件（提示我们输入一些信息，默认不输入即可）

6 在package.json的scripts字段中家加入：
"start": "node node_modules/react-native/local-cli/cli.js start",
7 npm install --save reactr eact-native

创建node_modules目录并把react和react-native下载到了其中

8 然后就是创建index.android.js文件,这里贴出官方的 js代码:

（注意：下面demo2的入口要跟package.json的name与入口ReactActivity中的getMainComponentName方法返回值一致）
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          我是 原生项目嵌入的 ReactNative
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('demo2', () => AwesomeProject);
9 新版本RN中只需要自定义一个Activity，并继承ReactActivity，实现getMainComponentName方法，在getMainComponentName方法中

返回RN注册的名称即可，名称需要与index.android.js中AppRegister的名称相同。通过源码可以看到，其实在ReactActivity中已经帮助我们实

现了ReactRoow的添加和ReactInstanceManager的默认配置。
public class MyReactActivity extends ReactActivity {

    @Nullable
    @Override
    protected String getMainComponentName() {
        return "demo2";
    }
}
10 然后创建Application，去初始化ReactNativeHost。自定义Application需要继承ReactApplication，在源码loadApp方法中，会将当前Activity的Application强转为ReactApplication，所以这是必须的步骤。getJSMainModuleName方法返回的是js的入口文件。
public class MainApplication extends Application implements ReactApplication {

    private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            )
        @Override
    protected String getJSMainModuleName() {
        return "index.android";
}
} ; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost ; } @Override public void onCreate() { super.onCreate() ; SoLoader. init( this,false) ; }}

11 在你的MainActivity界面中只有一个TextView，点击跳转到MyReactActivity ，跳转报错。

这时需要在module中新建一个assets目录，然后通过命令行将react-native的代码打包到assets目录中：

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

12 打开Terminal窗口，执行npm start来启动服务器

13 运行你的app就可以了

Android项目集成React-Native

猜你喜欢