Android集成React Native

近来因公司业务需要移动端使用React native，迫于无奈了解一些。

1.安装Python（2.7.x版本）

官网下载安装Python;

2.安装Node

官网下载Node.js V6或者更高版本

设置npm镜像（最好设置国内的镜像）

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

3.安装react-native 命令行工具

npm install -g react-native-cli

设置镜像文件

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

4.AS SDK Manager

在SDK Platforms中选择Show Package Details然后在Android 6.0 中勾选Android SDK Platform 23

在SDK Tools中选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.

5.配置ANDROID_HOME环境变量

Android Sdk 路径

6.配置CURL环境变量

官网下载并配置环境变量

需要的文件目录结构

curl环境变量

最后配置到Path中

7.集成到Android项目中

npm init

npm install --save react react-native

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

这三步走完就改修改点东西了；

8.修改package.json中的scripts标签

将原有的test修改为

 "start": "node node_modules/react-native/local-cli/cli.js start" 

9.在项目根目录创建index.android.js文件并将一下代码复制到其中

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('xxx', () => HelloWorld);

这里注意最后一行的XXX看你心情;

10.项目配置

这里免得麻烦就直接上图了

app的build.gradle

project的build.gradle

本来是

url "$rootDir/../node_modules/react-native/android"

编译通过之后在External Libraries中查看一下react native 版本是不是0.20.1如果是就改成我那样的，并没有影响（主要v7是23.0.1）

11.添加权限等~

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

如果需要开启rn的调试的话请添加

 

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

 

android 6.0以上的动态申请权限~

MainActivity继承ReactActivity（新版本的RN是继承）重写getMainComponentName方法

return 的是你index.android.js文件中最后一行你注册的name;

创建Appcalition extends Application implements ReactApplication;

记得在AndroidManifest文件中引用application

12.诸神的黄昏~

react-native start 或者 npm start

另起一个终端，输入react-native run-android,等待编译完毕就好了；

Hello World~祝你一次成功，反正我是失败了好多次；