【RN编程之旅01】Android原生项目集成React Nat

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

以下本篇的正文:

初始化React Native

1. 生成package.json文件，该文件用于记录react native版本信息和依赖包
2. 加入React，React Native类库
3. 生成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/

小结

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

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

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