mac电脑搭建react native环境

mac RN的环境搭建

react native中文网官方文档

ios开发环境的搭建

• 安装依赖

  • 安装brew

  官网可能安装不成功，可参考这篇文章

  • 安装node、watchman

  安装node：brew install node，如果你已经安装了 node，请检查其版本是否在 v12 以上。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程：
  使用nrm工具切换淘宝源：npx nrm use taobao；命令解析：npx首先在本地寻找nrm，如果没有找到会在仓库中下载nrm，nrm是用来管理npm镜像的，use taobao切换至淘宝镜像
  如果之后需要切换回官方源可使用：npx nrm use npm
  注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！
  安装watchman：brew install watchman，安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）

• 安装软件xcode、cocapods

  • xcode

  ios官方ide，appStore安装，安装后打开xcode（勾选同意协议），要不然以后的过程会报错

  • cocapods

  最常用的类库管理工具，功能与npm类似

  • 安装ios模拟器

  在安装完xcode时，已经内置了模拟器

android开发环境的搭建

• 安装依赖
  • 安装node、watchman
• 安装软件
  • jdk 1.8版本

  官网下载会需要oracle账号登陆下载，点击这里提供常用的oracle账号密码
  安装后输入命令：javac -version；有提示后证明jdk安装成功

  • android studio

  开发安卓程序的ide
  官网下载
  国内用户安装网站

  • android sdk及配置sdk环境变量
    • android sdk：下载android studio后打开软件，如下图，点击configure -> SDK Manager
      
      
    • sdk环境变量：

  React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。具体的做法是把下面的命令加入到 shell 的配置文件中。如果你的 shell 是 zsh，则配置文件为~/.zshrc，如果是 bash 则为~/.bash_profile

  export ANDROID_HOME=$HOME/Library/Android/sdk
  export PATH=$PATH:$ANDROID_HOME/emulator
  export PATH=$PATH:$ANDROID_HOME/tools
  export PATH=$PATH:$ANDROID_HOME/tools/bin
  export PATH=$PATH:$ANDROID_HOME/platform-tools
  

  首先输入命令cd ~（进入到mac电脑的根目录，显示隐藏文件，查看是否有.bash_profile文件，若没有touch .bash_profile -> open .bash_profile，上边的五行代码粘贴，保存即可，使用命令source $HOME/.bash_profile命令使环境变量立即生效；再使用echo $ANDROID_HOME检查此变量是否已正确设置，若有提示sdk的安卓路径，则成功）

  • android模拟器
    • 再次打开android studio，选择点击configure -> AVD Manager -> create Virtual Device -> phone -> Pixel 2 -> next -> Pie Download (android 9.0) -> finish
    • 点击actions列的启动按钮，即可启动模拟器

创建项目

npx react-native init AwesomeProject

无任何报错后

cd AwesomeProject
npm run android // 使项目运行在安卓模拟器中
npm run ios // 使项目运行在安卓模拟器中

若出现如下图错误，打开android studio，单独运行android项目，android studio会下载缺失的依赖。然后再次在项目根目录运行npx react-native run-android即可

自动弹出安卓模拟器，同时开启 8080服务器bash窗口如下图