React Native和Android整合详解
前言
按照React Native的迭代速度，使用官网的文档，已经不能很顺利的实现React Native和Android的有效整合。React Native最新版本 已经是0.39。为了更好的讲解React Native和Android的整合我这里列出我本地的环境：
- Android Stuidio 2.2稳定版
- 64位win7操作系统
- 红米note3双网通普配版
- React Native 0.39
具体实践
创建项目
这一步按照AS新建项目向导一步步完成即可，完成后。
- 在app module下的build.gradle文件的dependencies中添加React Native 依赖：compile
“com.facebook.react:react-native:+” - 修改Manifest文件：
<uses-permission android:name="android.permission.INTERNET" />
<application ...>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
注：compile SDK 和target SDK都是24（网上有文章讲，使用的appcompat-v7支持包版本必须是23.0.1，compile SDK和target SDK也必须是23 。不过最新的也支持的）
compile 'com.android.support:appcompat-v7:24.2.1'
- 1
- 1
如果你出现下面的错误，可以降低版本到23.
Caused by: java.lang.IllegalAccessError: Method 'void
android.support.v4.net.ConnectivityManagerCompat.<init>()'
is inaccessible to class
'com.facebook.react.modules.netinfo.NetInfoModule'
(declaration of 'com.facebook.react.modules.netinfo.NetInfoModule'
appears in /data/app/com.milter.www.awesomeproject2-2/base.apk)
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
将Android项目变成React Native项目
其实整合的过程就是将一个原生的Android项目，转换为满足React Native结构格式的项目React Native项目结构。
- 创建并修改package.json文件
进入Android项目的根目录，使用命令：
npm init
- 1
- 1
这个命令会引导你在ReactNativeWithNativeApp目录下创建一个package.json文件。如图所示：
接下来我们对package.json文件进行修改，修改部分如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
- 1
- 2
- 3
- 1
- 2
- 3
修改为：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
,"start": "node node_modules/react-native/local-cli/cli.js start"
}
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
修改后，我们在项目根目录的命令行窗口中输入命令：
npm start
- 1
- 1
就相当于执行如下命令：
node node_modules/react-native/local-cli/cli.js start
- 1
- 1
随着package.json文件的创建，我们的项目也变成了一个Node项目。
引入React Native 模块
在项目根目录下输入如下的命令：
npm install --save react react-native
- 1
- 1
执行完后我们发现项目多了一个node_modules文件，react native依赖的库都会在这里看到。
- 创建.flowconfig文件
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
- 1
- 1
这一命令的作用是将命令中url指向的.flowconfig文件下载到项目的根目录。在上面的图packagejson中可以看到这个下载后的文件。关于curl的讲解请看curl详解
注：如果你不想使用curl命令，你可以可以https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig拷贝里的内容存为.flowconfig文件。
创建RN程序
在根目录下创建index.android.js文件，如果你是直接用react-native init demo（项目名），也可以拷贝index.android.js，具体代码如下：
'use strict';
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('HelloWorld', () => HelloWorld);
- 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
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 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
- 26
- 27
- 28
- 29
- 30
- 31
- 32
将React Native程序整合进Android项目
在项目根目录的build.gradle中(注意：不是app模块中的build.gradle文件)添加依赖。
allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$projectDir/../node_modules/react-native/android"
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
修改MainActivity内容，完整代码如下：
public class MainActivity extends AppCompatActivity
implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
private LifecycleState mLifecycleState
= LifecycleState.BEFORE_RESUME;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/* 下面的版本判断代码官方文档中没有，
如果不添加，在6.0以上的Android版本中会报错 */
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent serviceIntent = new Intent(
Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
startActivity(serviceIntent);
}
}
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(mLifecycleState)
.build();
//下面代码中的"HelloWorld"来自index.android.js文件中最后一行代码
mReactRootView.startReactApplication(mReactInstanceManager,
"HelloWorld", null);
setContentView(mReactRootView);
}
@Override
protected void onPause() {
super.onPause();
mLifecycleState = LifecycleState.BEFORE_RESUME;
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
mLifecycleState = LifecycleState.RESUMED;
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
mReactRootView.unmountReactApplication();
mReactRootView = null;
if (mReactInstanceManager != null) {
mReactInstanceManager.destroy();
}
}
@Override
public void onActivityResult(int requestCode, int resultCode,
Intent data) {
if (mReactInstanceManager != null) {
mReactInstanceManager.onActivityResult(this,requestCode,
resultCode, data);
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
}
else {
super.onBackPressed();
}
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
- 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
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 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
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
运行配置
使用npm start命令运行项目，然后使用
react-native run-android
- 1
- 1
如果报错，请往下看。如果出现如下错误：
java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so
- 1
- 1
这个错误的原因是React Native提供的libreactnativejni.so文件是32位，而我们的项目中用了一些不兼容的64位so文件，二者混在一起产生的。解决的办法就是禁止使用那些64位的so文件。
第一，在项目根目录下的gradle.properties文件最后加上这样一句：
android.useDeprecatedNdk=true
- 1
- 1
第二、在app module下的build.gradle文件中添加如下内容：
android {
...
defaultConfig {
...
ndk{
abiFilters "armeabi-v7a", "x86"
}
...
}
...
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
第三、找出不兼容的64位so文件并禁止它们
在目录…\ReactNativeWithNativeApp\app\build\outputs\apk下找到app-debug.apk，并把它解压，查看一下，解压后的文件的lib目录下有没有这个目录：
arm64-v8a
如果有这个目录，看看里面的so文件，都是我们要禁止的，禁止的方法如下：假设里面有一个 1.so文件，我们要在app module下的build.gradle文件中做如下修改：
android {
...
defaultConfig {
...
ndk{
abiFilters "armeabi-v7a", "x86"
}
packagingOptions {
exclude "lib/arm64-v8a/1.so"
}
...
}
...
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
好了，整合就说完了，请大家持续关注哦，现在出项目实战了
