背景
各位童鞋有木有感觉官方文档很坑啊,根据官网的描述,首先在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 中文社区