Android原生项目集成ReactNative混合开发

假设你已经配置好了ReactNative开发所需的开发环境,若没有,建议先看这篇React Native官网的翻译:搭建开发环境

以下是 本篇的正文:

初始化React Native

  1. 生成package.json文件,该文件用于记录react native版本信息和依赖包
  2. 加入React,React Native类库
  3. 生成flowconfig文件
1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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'
}
}

添加权限

1
2
3
4
5
<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示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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);

编译运行到安卓真机

1
2
adb reverse tcp:8081 tcp:8081
npm start

打包

新建assert资产文件

1
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/

小结

  1. 本次Android集成了React Native0.51.0版本的环境(最新为0.56.0),采取了原生项目为主,编译和打包仍走安卓项目的Gradle流程

  2. React Native集成过程中,由于Kotlin改写了模块iml文件里的某处标签信息,使得项目无法正常编译,往文件里手动添加如下标签得以修复:

1
<orderEntry type="jdk" jdkName="Android API 27 Platform" jdkType="Android SDK" />