liubobuzhidao

ReactNative之与原生android项目集成

发表于 | 分类于 | 阅读次数 |
之前一直是使用react-native init Project命令一路执行下去新开项目比较简单，不用考虑一些琐屑的配置引用事情，但是根据需求使用RN做了一个Demo后发现RN不是这么用的，纵观已加入RN阵营的国内大厂都是在某个模块中使用RN而非全部使用，究其原因可能还是和RN的稳定性有关。

以下内容基本上都是根据官方的指导下进行的操作，如有疑问可以私聊！

注：集成的android项目Minimun SDK => 16+

1、在android项目的根目录下创建一个package.json文件，后续的npm install都是根据这个配置信息进行下载安装的，其内容大抵如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "NewConfigTool",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "postinstall": "rndebugger-open",
    "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js  --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/"
  },
  "dependencies": {
    "react": "15.4.1",
    "react-native": "0.42.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

然后执行以下两个命令：

1
2
npm install --save react react-native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

为了避免将不必要的文件上传到Git上可以在.gitignore文件中添加以下注释：

1
2
3
# node.js
# node_modules/
npm-debug.log

2、在根目录下创建index.android.js文件，可以顺便创建一个文件夹用来后续放JS代码，示例代码如下：

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
'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);

3、现在开始原生端的配置了，

​ 1）在项目的build.gradle文件中添加以下内容：

1
2
3
4
5
6
7
8
allprojects {
    repositories {
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

​ 2) 在app文件目录下的build.gradle中添加如下内容：

1
compile "com.facebook.react:react-native:+" // From node_modules.

​ 3）添加权限 、添加清单文件

1
2
3
<uses-permission android:name="android.permission.INTERNET" />
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

4、开始本地代码

创建一个Activity继承Activity，实现DefaultHardwareBackBtnHandler接口，示例代码如下：

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
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
        setContentView(mReactRootView);
    }
    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

如果有其他的需求可以在该类中进行添加处理。

4、运行App

在运行之前需要在根目录下执行 npm start,然后按照正常的运行程序即可。（可以./gradlew installDebug，也可以在AS中像正常的程序一样debug）