一小时快速搭建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


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

sdk tools

点击右下角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的操作,如果有纰漏,欢迎留言矫正。

阅读 5k

全栈那些事
授人以鱼不如授人以渔

极客

3.2k 声望
1.2k 粉丝
0 条评论

极客

3.2k 声望
1.2k 粉丝
文章目录
宣传栏