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

上一篇: Android 代码混淆(二) 下一篇:Android实现SwipeBack（右滑退出...

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

发布时间：2019-06-26 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了一小时快速搭建react-native（0.55.4），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

为什么说是1小时呢，这是根据我让我同事从零开始使用的时间。不过准确的讲，还没到1个小时。
准备工作
开启vpn，开启vpn，开启vpn，是的，没有vpn的话，不仅时间加倍，而且失败的概率很大。
1、nodeJs

      
      
      @H_304_19@
      
      
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，点击设置项：

      
      
      System Settings -> Android SDK -> SDK Platforms" tITle="" data-original-title="复制">
      
      
ApPEarance &amp; 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语句

      
      
      PRofile
  
  source $HOME/.bash_profile
fi" title="" data-original-title="复制">
      
      
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的操作，如果有纰漏，欢迎留言矫正。