在Windows下搭建React Native Android开发环境

一、安装JDK

二、安装Android SDK



三、安装C++环境

网上很多以前的资料（其实就是那一份）都说安装Visual Studio 2013或2015，编译node.js的C++模块时需要用到。这里我没安装，我的系统是win7，好像win7自带了编译C++的工具,然后之前安装过了c-free这个软件，又考虑到电脑承受能力，所以没就安装大的软件。等后面有问题了再说。事实在后面没有出现这方面的问题。

四、安装node.js

从官网下载node.js的官方4.1版本或更高版本。安装好后在命令行下执行node -v命令是否成功，成功会显示版本信息。这个本人之前已安装。

安装react-native

命令行下运行命令

npm install -g react-native-cli

五、初始化项目

在电脑上任何一个地方创建一个目录， 例如我在E盘创建一个MyProject的目录，然后命令行下进入到MyProject目录，执行命令：

react-native init MyProject

这里需要耐心等待几分钟，使网络情况而定。这里MyProject是随便取的，执行上面的命令后，在我的MyProject目录下生成了MyProject目录，这个目录包含了整个项目的文件，初始化成功后在命令行最后会显示下面的信息



六、运行package

上面init之后，我们可以运行react-native run-android命令，如果成功的话，可以将应用安装到真机或模拟器，我这里使用的是真机。但是安装之后可能什么也显示不了，还会有一些错误信息。这是由于手机获取不到显示view的文件，那么这时候我们就需要运行package.在项目目录，输入react-native start并执行，等待一段时间：



这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问表示服务器端已经可以了。



七、运行项目

刚刚运行package的命令行不要关闭，重新启动一个新的命令行，

进入项目目录，输入react-native run-android命令并执行，这个过程需要几分钟的时间



在这个过程中可能会出现一些问题，导致build失败：

1. 你没有配置ANDROID_HOME,需要再系统变量中加入这个，指到sdk目录。

2. android sdk的版本太旧了，最低需要android-23

3. 需要新的Android Support Repository

成功会显示：



在运行命令之前，手机要连上电脑，adb devices命令下可以看到设备，手机和电脑应在同一个局域网上，这个后面会用到。

经过上面的折腾之后项目安装到手机上了，如果你打开应该手机显示一片白，请检查是否开启悬浮框权限，开启之后会显示成下图：



这里使用一下别人的图片，我做的时候没截这个图。这里警告信息可能有差别。

第一次都会出现上面的情况，这是需要摇一摇，打开开发者菜单，点击Dev Settings后，点击Debug server host & port for device,设置IP和端口





这里的IP是电脑的IP，不知道的可以在命令行中输入ipconfig进行查询，端口号固定8081。这里我们应该想到为什么需要第六步的原因。

设置完成后，回到空白页面，再次摇一摇手机，选择Reload JS，程序就运行起来，出现Welcome to React Native！



至此，整个项目就跑起来了，万里长征迈出了100步！

八、欢迎页

最后的稍稍分析一下欢迎也是如何显示出来的。

在项目目录MyProject目录下有个文件index.android.js文件，打开这个文件，会有一段代码：

/**
* Sample React Native App
* https://github.com/facebook/react-native */

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

class MyProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

AppRegistry.registerComponent('MyProject', () => MyProject);

在android目录 app下一直找到MainActivity.java文件，里面有个方法：

/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "MyProject";
}

这个方法就是显示AppRegistry里注册的MyProject组件。欢迎页的内容就是这么显示出来的。