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
        mac电脑搭建react native环境_第1张图片
        mac电脑搭建react native环境_第2张图片
      • 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即可
mac电脑搭建react native环境_第3张图片

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

你可能感兴趣的:(原生框架,react,react,native,RN环境配置)