背景
各位童鞋有木有感觉官方文档很坑啊，根据官网的描述，首先在chocolate就直接卡死了，VPN没什么卵用，于是逐个去官网下载，直到昨天才发现不用VPN也可以下！公司是windows环境，这里就先用windows搭建。
因为本身是移动开发者，所以就假设已经你已经安装Android Studio和JDK了，并且已经配置了，不然你连Android没法开发，对吧！
硬件要求
- JDK1.8
- Android Stduio2.0及以上
- Android SDK6.0及以上
必装软件：
必装软件，已经放到网盘了，大家可自行下载
Python 2
目前不支持Python 3版本
Python官网推荐版本是2.7.13。
Node
目前不支持Node 7.1版本
-
目前Node官网推荐6.9.2版本，和Python2.7搭配使用
-
在安装的时候注意选择环境，windows的就选windows，别选错了。
-
测试安装：打开终端 -> 输入node -v ->提示版本号则安装成功
Yarn和Git：
Yarn是官网上推荐的React Native的命令行工具（react-native-cli）
Git也是命令行工具，并且有过之而无不及，个人觉得Git好用，但是现在这个版本必须得安装Yarn。
Git也是命令行工具，而且用的人也更多，个人感觉也更好用，不过现在装不装都行，个人觉得是替代系统命令行的好东西。
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务，先安装了吧，省的在这上面浪费时间。
下面的用法按照Git来讲，边操作边讲解
一切默认安装，装完之后打开命令行
执行更新命令行工具，就是Yarn，前面我们已经安装好了就OK了，不用等了
npm install -g yarn react-native-cli
但是要记得你装到哪儿了，一会儿还得创建工程呢
创建工程
我觉得有必要说一下，个人实测，VPN感觉不如镜像快，不知道为毛
现在要做的是，关掉你的VPN，除非你觉得非常稳定，然后设置淘宝镜像
淘宝镜像地址：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
创建工程
- 进入你的工作目录
- 执行
react-native init MyProject - 耐心等着吧，别着急，网速不好的，保护好自己的蛋，容易蛋疼。
- 创建好了之后是可以执行命令的
运行package
- 命令行中进入项目目录，就是上面那个MyProject目录
- 执行
react-native start - 继续耐心的等着
- 上面执行完了点击这里测试
- 如果上面没报错，显示JS串，说明服务端准备就绪了
运行项目
- 重新打开一个命令行并进入工程目录
- 执行
react-native run-android - 耐心的等着gradle慢慢下载吧
- 他下载完之前你可以准备测试工作
连接设备测试
我的测试机为小米Note3
- 连接手机
- 清空你的手机助手之类的进程，他们会抢占端口
- 执行
adb devices查看设备，确保连接成功 - 第一次运行肯定报错，手机为红色屏幕就说明对了
- 确保开启悬浮窗权限，如果没有的话，开启后杀死进程重新进入
- 开启方法：应用管理里面，点击应用权限进行设置
- 摇一摇手机，出现弹框，选择Dev Settings
- 然后点击Debug server host & port for device设置IP和端口，端口默认8081
- 设置完成后，回到空白页面，再次摇一摇手机，选择Reload
- OK了
修改项目
- 进入项目，打开index.android.js
- 随便改点什么，比如说：
export default class MyProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
踏马的终于弄好了!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
- 摇一摇手机，Reload
问题
我遇到的问题
- 测试手机为白屏
解决办法是打开设置，开启悬浮窗权限，kill 进程，重新运行 - 安装的时候总是失败
这是因为我的网速不好- -！ - 其他问题
大部分问题可以在下面的地址找到解决办法：
React Native 中文社区
网友评论