React-Native Primary 工具搭建

React-Native 2017-02

参考React Native中文网

• Chocolatey

  • 安装Chocolatey，这里安装请参考Windows系统的包管理器Chocolatey的安装及使用介绍，这里根据不同的环境选择如下其中之一的安装方法即可：

  • CMD环境：

    @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

  • PowerShell 1.0:

    iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))

  • PowerShell 3.0:

    iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex

  目前验证第一种方法可以安装成功。
  

  安装完成以后的截图：
  

  第二种方法，像cmd一样直接调起powerShell，但是安装失败。

  第三种方法需要升级到3.0，暂未尝试。

  通过输入

  chocolatey -v

  验证当前的版本。

• Python 2
  打开cmd命名窗口，直接输入

  choco install python2

  目前并不支持python3，安装完成以后，可以通过输入

  python -V

  验证当前的版本。

• Node
  打开cmd命名窗口，直接输入

  choco install nodejs.install

  目前已知Node 7.1版本在windows上无法正常工作，请避开这个版本。安装完成以后，可以通过输入

  node -v

  验证当前的版本。

• 验证 chocolatey/python2/node

  我们验收一下上面需要的工具是否都已经准备到位：
  

• 配置

  安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。

  npm config set registry https://registry.npm.taobao.org --global
  npm config set disturl https://npm.taobao.org/dist --global

  只是配置，并没有相应的执行结果提示。

  Yarn、React Native的命令行工具（react-native-cli），Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

  npm install -g yarn react-native-cli

  

• Android Studio（此处省略）

• Git(可选)

  choco install git

  

• 测试安装

我们在自己喜欢的地方比如D盘新建一个目录D:\React_Native_Workspace，然后通过命令窗口指向这个目录，并按照顺序输入以下命名

```cmd
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
```

运行第一条命令需要等待较长时间，安装完成以后，进入AwesomeProject项目，然后运行react-native即可，当然要链接设备，否则会报错。

我们看看执行的截图

build success，尼玛没有发现设备。

这里验证是否发现设备可以通过adb的命名

adb devices

如果像上面这样，那就不会出现问题了，但是往往是 List of devices attached 下面没有任何东西，肿么办？

网上有专门的应对办法，驱动安装成功 adb devices无法找到设备 解决方法

需要补充的就两点：

• 文件adb_usb.ini,需要手动设置的值形如 0x2B4C，如下所示
  

• 在哪个目录中修改也不要搞错了

一般应该在如下目录：

C:\Users\用户名\.android

而不是这样的目录：

C:\Users\用户名\Documents\.android

上面设置完成以后，运行完成的截图如下：

另外再真机上可能会出现闪白屏，这个时候需要设置一下悬浮窗权限。

然后运行，效果如下：

到这儿 一脸懵逼有木有~~

• 问题

  我们直接在所在目录中运行如下命令

  react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

  然后会提示我们找不到assets目录，这时，我们手动新建这个目录即可，然后再运行一遍上面的命令。

  

再回到我们新建的目录中，发现新增了两个文件。

然后我们再重新运行命令

react-native run-android

然后我们就看到了成功界面：