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 (              Hello, RN          )  }}var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',  },  hello: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },});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@Overridepublic 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 文件：

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/

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

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

更多相关文章

随机推荐