React Native学习笔记2：Android环境搭建

背景

各位童鞋有木有感觉官方文档很坑啊，根据官网的描述，首先在chocolate就直接卡死了，VPN没什么卵用，于是逐个去官网下载，直到昨天才发现不用VPN也可以下！公司是windows环境，这里就先用windows搭建。

因为本身是移动开发者，所以就假设已经你已经安装Android Studio和JDK了，并且已经配置了，不然你连Android没法开发，对吧！

硬件要求

• JDK1.8
• Android Stduio2.0及以上
• Android SDK6.0及以上

必装软件：

必装软件，已经放到网盘了，大家可自行下载

React-Native-Windows64

Python 2

目前不支持Python 3版本

Python官网推荐版本是2.7.13。

Node

目前不支持Node 7.1版本

• Node官网下载

• 目前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

创建工程

1. 进入你的工作目录
2. 执行 react-native init MyProject
3. 耐心等着吧，别着急，网速不好的，保护好自己的蛋，容易蛋疼。
4. 创建好了之后是可以执行命令的

运行package

1. 命令行中进入项目目录，就是上面那个MyProject目录
2. 执行 react-native start
3. 继续耐心的等着
4. 上面执行完了点击这里测试
5. 如果上面没报错，显示JS串，说明服务端准备就绪了

运行项目

1. 重新打开一个命令行并进入工程目录
2. 执行 react-native run-android
3. 耐心的等着gradle慢慢下载吧
4. 他下载完之前你可以准备测试工作

连接设备测试

我的测试机为小米Note3

1. 连接手机
2. 清空你的手机助手之类的进程，他们会抢占端口
3. 执行 adb devices 查看设备，确保连接成功
4. 第一次运行肯定报错，手机为红色屏幕就说明对了
5. 确保开启悬浮窗权限，如果没有的话，开启后杀死进程重新进入
6. 开启方法：应用管理里面，点击应用权限进行设置
7. 摇一摇手机，出现弹框，选择Dev Settings
8. 然后设置IP和端口，端口默认8081
9. 设置完成后，回到空白页面，再次摇一摇手机，选择Reload
10. OK了

修改项目

1. 进入项目，打开index.android.js
2. 随便改点什么，比如说：

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> ); } }

1. 摇一摇手机，Reload

问题

我遇到的问题

1. 测试手机为白屏
   解决办法是打开设置，开启悬浮窗权限，kill 进程，重新运行
2. 安装的时候总是失败
   这是因为我的网速不好- -！
3. 其他问题
   大部分问题可以在下面的地址找到解决办法：
   React Native 中文社区

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!