假设你已经配置好了React Native开发所需的开发环境，若没有，建议先看这篇React Native官网的翻译：搭建开发环境
以下本篇的正文:
初始化React Native
- 生成package.json文件，该文件用于记录react native版本信息和依赖包
- 加入React，React Native类库
- 生成flowconfig文件
npm init
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
}
npm install --save react react-native@版本号
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
配置原生安卓项目的Gradle
allprojects {
repositories {
maven {
url "$rootDir/node_modules/react-native/android"
}
jcenter()
}
}
dependencies {
implementation 'com.facebook.react:react-native:版本号'
}
android {
defaultConfig {
ndk {
//选择要添加的对应cpu类型的.so库。
abiFilters 'armeabi', "armeabi-v7a","armeabi-v7a","x86"
}
}
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
}
}
添加权限
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW"/>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
添加React native入口
在项目根目录下，新建index.js文件作为React Native控件配置页
Hello World示例
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, World</Text>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('AndroidRnDemoApp', () => HelloWorld);
编译运行到安卓真机
adb reverse tcp:8081 tcp:8081
npm start
打包
新建assert资产文件
react-native bundle --platform android --dev false --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
小结
本次Android集成了React Native0.51.0版本的环境（最新为0.56.0），采取了原生项目为主，编译和打包仍走安卓项目的Gradle流程
React Native集成过程中，由于Kotlin改写了模块iml文件里的某处标签信息，使得项目无法正常编译，往文件里手动添加如下标签得以修复：
<orderEntry type="jdk" jdkName="Android API 27 Platform" jdkType="Android SDK" />
