第一个React Native程序踩到的那些坑

绝不夸张的说用React Native写一个Hello World ！程序是我碰到最复杂的Hello World。网络上的有关的环境搭建相关的文档也不少，可是老是有这样那样的问题。

官方中文版的安装文档，windows环境搭建文字教程

缘由可能有3个：

  1. 这个东西最先仍是在Mac机上开发的，可能支持的会好一点，windows平台时间短。

  2. 网络被墙或不稳定，注册npm淘宝镜像会快不少，可是不能彻底解决问题。

  3. 版本问题，Nodejs版本、React Native 版本、Android SDK 版本。。。。等等

问题老是有解决的方法，下面我说一下我踩到的坑：

1、按照文档上说的一路往下走，到react-native init MyProject 这一步可能会用问题，首先MyProject不能大写开头，其次这一步可能会让你无限的等下去，直到绝望，

没办法只能cancel掉，而后

    1.npm init

    2.npm install react-native --save

    3.node -e "require('react-native/local-cli/cli').init('.','myproject')"

2、 运行react-native run-android到这里多是问题最多的。

   1.文档上面推荐用Genymotion模拟器测试，我也试过了，不简单并且很慢，最后仍是用本身的手机链接，具体怎么打开USB调试开关可能每一个设备还不同。我用的是小米Note，问题在GitHub有人回答，最重要的一点是：go back to Developer options, scroll down to find Turn on MIUI optimization and disable it. Your phone will be rebooted。关闭到全部的电脑上的手机助手链接。用命令adb devices 能看到则说明链接成功，注意不能同时打开模拟器和手机设备。

   2.在安装Android SDK时，Tools/Android SDK Build-tools (23.0.1)（这个必须版本严格匹配23.0.1），这个文档上面也说了，必定要注意，react-native模板配置文件里面默认的是23.0.1版本的。

最后上一张安装成功的图片

 

3.修改图标和App名称，修更名称：..\android\app\src\main\res\values\strings.xml文件里面的名称。修改图标：..\android\app\src\main\res目录下面文件夹里面的png文件，替换图标文件，注意图片尺寸和名称不能改变，以后在项目目录下面要运行 react-native start ，必定要运行这个命令，而后新开命令窗口在项目目录下面再运行 react-native run-android，会从新安装就能够看到新的名称和图标了。