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

96
世外大帝
2016.12.27 15:31* 字数 1168

背景

各位童鞋有木有感觉官方文档很坑啊,根据官网的描述,首先在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. 然后点击Debug server host & port for device设置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 中文社区
React Native
Web note ad 1