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: 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
@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 文件:
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)~