Android 在 Fragment 中集成 React-Native（RN）步骤

1、创建 package.json 和 index.android.js 文件：

package.json 代码如下，其中RN版本为 0.48.4：

{
  "name": "FragmentWithRN",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.4"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  }
}
           

index.android.js 只是简单显示

Hello, RN

文本，代码如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

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

AppRegistry.registerComponent('FragmentWithRN', () => HelloWorld);
           

注意：package.json 的

name

和 index.android.js 中

AppRegistry

的第一个参数要一致，这里组件名均为

FragmentWithRN

。

2、在 AS Terminal 中输入

npm install

命令，从npm服务器下载对应的 node_modules；

3、添加依赖：

在 app 中 build.gradle 文件中添加 RN 依赖:

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

在项目的 build.gradle 文件中为 RN 添加 maven 依赖的入口，必须写在

allprojects

代码块中:

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

注意：上面url 要写成

$rootDir/node_modules/react-native/android

而不是

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

，写成后面形式在我的 AS 中RN版本会变成 0.20.1而不是目标的 0.48.4，掉进这个坑很久后才发现。

4、在需要集成的 Fragment 中添加如下代码：

private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    mReactRootView = new ReactRootView(getActivity());
    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getActivity().getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModuleName("index.android")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    mReactRootView.startReactApplication(mReactInstanceManager, "FragmentWithRN", null);
    return mReactRootView;
}
           

这里，组件名

FragmentWithRN

与 package.json 中的 name 仍然要保持一致。

5、在 AS 的 Terminal 中使用如下命令打包，生成 bundle 文件：

最终，生成的 bundle 文件位于 app/src/main/assets/ 文件夹下。

至此，在 Fragment 中集成 RN 的步骤就完成啦，效果如下所示（所用手机为魅族 M3s，Android 版本为 5.1）~