一小时快速搭建react-native（0.55.4）

为什么说是1小时呢，这是根据我让我同事从零开始使用的时间。不过准确的讲，还没到1个小时。

准备工作

开启vpn，开启vpn，开启vpn，是的，没有vpn的话，不仅时间加倍，而且失败的概率很大。

1、nodeJs

brew install node

是的很简单，不过作为职业前端，你可能需要用到更为专业的nvm，假设你已经装好nvm，那么可以安装任意node版本

nvm install 9.11.1
# nvm install 8.10.0
# nvm install VERSION

# 想看你自己装了什么版本吗？
nvm ls

2、Android

安装JDK

注意，目前为止，装JDK10是用不了的。必须安装JDK8，不要搞错版本了， 传送门去下载

安装Android Studio

用于安装android sdk，点击去官方下载

安装SDK

打开 android studio，点击设置项：

Appearance & Behavior -> System Settings -> Android SDK -> SDK Platforms

注意：右下角的 Show Package Detail 需要打钩，
接着选择Android 6.0包括它的二级选项包括：

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

---

从SDK Platforms切换到SDK Tools，
注意：右下角的 Show Package Detail 需要打钩，
接着选中Android SDK Build-Tools 下面的 23.0.1

点击右下角Apply按钮，会问你要不要安装。安装的时候，笔者看到下载地址包含.google.com的域名，没有vpn应该百分百失败吧...

SDK路径导出

SDK下载完后，还不能直接用，需要告诉系统它们的位置，执行下面的shell语句

ANDROID_PATH_EXIST=`cat ~/.bash_profile | grep ANDROID_HOME=`

if [ "$ANDROID_PATH_EXIST" == "" ]; then
  echo '
  
    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools
    
  ' >> ~/.bash_profile
  
  source $HOME/.bash_profile
fi

创建模拟器

打开android studio，创建一个新项目，目的是为了能进入写代码的界面，然后点击右上角的 AVD Manager。

1、任意选择一个机型
2、选择 x86_64---Android 6.0(Google APIs) 版本
3、点击Show Advanced Settings，把 RAM 加到 3096。（不加卡到吐血）
4、点击右下角 Finish

3、Ios环境

---

Xcode

笔者现在用的RN版本为0.55.4，源码已经包含了一些新特性的代码（应该是swift吧），意味着你的xcode的版本必须是9.x以上的，如果是8.x，那么请立刻去AppStore 下个最新版本

额外的安装包

启动ios的时候，似乎每次都会判断几个软件(位置~/.rncache/)，没有就去下载，但是这几个软件总有一个或者两个是下载错误的，即使开了vpn也没用。也就是说和网速无关，和人品有关，请执行：

mkdir -p ~/.rncache
rm -rf ~/.rncache/*
cd ~/.rncache
curl \
 -O https://raw.githubusercontent.com/fwh1990/react-native-rncache/master/boost_1_63_0.tar.gz \
 -O https://raw.githubusercontent.com/fwh1990/react-native-rncache/master/double-conversion-1.1.5.tar.gz \
 -O https://raw.githubusercontent.com/fwh1990/react-native-rncache/master/folly-2016.09.26.00.tar.gz \
 -O https://raw.githubusercontent.com/fwh1990/react-native-rncache/master/glog-0.3.4.tar.gz &&
echo '下载完成'
cd -

4、初始化react-native

---

安装工具

npm install -g react-native-cli

生成项目

名字不要包含符号，不然貌似打包时会失败。所以用驼峰是最妥当的。
生成项目后，项目的根文件夹倒是随便你怎么改都行，加符号也无所谓，只需符合文件夹命名。

react-native init ReactNativeProject

5、启动

注意：你的安卓模拟器要先启动啊（通过android studio），如果你想自动开启模拟器，那么可以看我的另一篇文章命令行启动android模拟器。

然后在package.json的scripts中写入start脚本：

  react-native run-android --port=8081 \
  && react-native run-ios --port 7009 --simulator 'iPhone 7'

然后执行 npm start。

6、常见问题

如果发现iPhone模拟器的动作很慢，可以先让模拟器获得焦点，然后在电脑顶部选择Debug按钮，把Show Animations的打钩去掉

---

如果有报watchman相关的错，应该是安装包没装：

npm install watchman --save-dev

7、结尾

这是基于macos的操作，如果有纰漏，欢迎留言矫正。