mac RN的环境搭建
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
- android sdk及配置sdk环境变量
- android sdk:下载android studio后打开软件,如下图,点击configure -> SDK Manager
- sdk环境变量:
- android sdk:下载android studio后打开软件,如下图,点击configure -> SDK Manager
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窗口如下图