React-Native 环境搭建以及工具配置

前言：
       作为一名原生iOS开发，最近面临换工作。在求职中发现很多公司需求中，需要有跨平台开发经验。市场变化太快，为适应市场需求，开始学习React-Native开发。之所以选择RN，是因为我有H5和小程序开发经验，学习成本较低。

1.安装或更新HomeBrew

遇到无法下载node情况，更新HomeBrew,然而HomeBrew update 无法更新，提示xcode 版本太低outdate，但本地xcode已经更新到xcode10

解决方法：替换HomeBrew镜像源
使用中科大的镜像替换默认源

1. cd "$(brew --repo)"
2. git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
3. cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
4. git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
5. brew update

2.安装node和watchMan

brew install node
brew install watchman
(如果之前安装过Python，可能安装不成功，不过不要紧,watchman的安装是可选的)

注意：如果你已经安装了 Node，请检查其版本是否在 v8.3 以上
命令：node -v

安装完 Node 后建议设置 npm 镜像以加速后面的过程（不然只能科学上网）

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

3.安装yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载

npm install -g yarn react-native-cli

安装完后同样设置镜像源

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

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

4.创建RN项目

react-native init RNProject

此时会在命令行窗口的所在的文件目录下创建一个名为RNProject项目，想要指定文件创建的位置，要在创建前改变命令行窗口的当前目录，就可以实现指定文件夹了

5.运行项目

1. cd RNProject
2. react-native run-ios

此时首次编译运行会比较久，也可以直接找到iOS项目文件，直接用xcode 运行，速度会比较块

image.png

运行成功后会弹出一个新的命令行窗口，这个窗口相当于本地服务器，运行项目期间不要关闭

image.png

6.在webstorm上安装智能提示插件

如果想使用webstorm 来进行RN项目开发，最好安装RN智能提示插件

命令行操作:

1. cd desktoop
2. git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
3. 复制克隆下来库中的ReactNative.xml 文件
4. cd ~/Library/Preferences
5. ls 回车（列出Preferences 下的内容找出你的webStorm 应用名称）

6. open webStorm2017.1 (wenstrom 名称一定要对)

   
   image.png

7. 找到templates文件，把ReactNative.xml复制进去，重启webstrom 即可

   
   image.png

       好了，到此RN开发环境已经搭建完毕，可以愉快的开发了，当然只靠这些肯定是不够的，接下要学习RN方面的知识，例入Flex布局,JSX语法，已及项目中适配问题等等，学习的路还很长，欢迎交流。