React Native 环境搭建（mac）

一、安装HomeBrew

Homebrew 是 OS X 或者 macOS 的套件管理器，我们可以通过它来获取并安装很多组件

二、安装 Node.js

  • 安装方法一：
  • 下载Node.js 当前版本为v6.9.3，如需最新版本，可在官网下载;
  • 下载之后双击安装即可，npm也会随之安装，npm用于nodejs包管理的工具。
  • 安装方法二：
  • 使用homebrew安装Node.js，默认安装的是最新版本，
    brew install node
  • 安装完成后
  • 建议设置npm镜像，以加速后面的过程
    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

三、安装watchman和flow

  • 1、watchman是用于监听文件变化的工具

  • 2、flow是静态分析js语法错误的工具
    安装命令如下：
    brew install watchman
    brew install flow

  • 你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法。

  • 如果watchman安装时出现错误

四、安装iOS和安卓运行环境

  • 1、iOS：安装Xcode，最好是Xcode8.1以后。
  • Apple开发者官网下载Xcode
  • 或在App Store下载Xcode：链接
  • 2、安装Android运行环境
  • 安装和配置 SDK
    • 安装最新的 JDK
    • 安装 Android SDK：
      brew install android-sdk
    • 设置 ANDROID_HOME 环境变量
      1、如果.bash_profile不存在，进入用户当前的home目录进行创建
      cd ~
      touch .bash_profile
      2、使用vim .bash_profile或open .bash_profile,在打开的界面进行编辑
      3、如果你是通过HomeBrew安装的SDK，则加入下面的路径：
      exportANDROID_HOME=/usr/local/opt/android-sdk#
      否则加入：
      exportANDROID_HOME=~/Library/Android/sdk
      4、建议把Android Tools Directory 也加到里面:
      PATH="/Library/Android/sdk/tools:/Library/Android/sdk/platform-tools:${PATH}" export PATH
      添加路径截图

      5、更新刚配置的环境变量 source .bash_profile
  • 安装 Android Studio
  • 安装模拟器 Genymotion和虚拟机VirtualBox
    • Genymotion 是一个第三方模拟器，它比 Google 官方的模拟器更易设置且性能更好。但是，它只针对个人用户免费
      • 如果你尚未安装 VirtualBox，先安装VirtualBox，否则无法打开Genymotion；
      • 下载并安装 Genymotion 打开 Genymotion
      • 创建一个模拟器并启动
      • 按下 ⌘+M

五、安装开发工具

六、安装 React Native

  • 安装方法一：从github下载: https://github.com/facebook/react-native
  • 安装方法二：直接用命令安装：
    npm install -g yarn react-native-cli
  • 如果你看到 EACCES: permission denied这样的权限报错，修复 /usr/local 目录的所有权
    sudo chown -R whoami /usr/local
  • 或者用如下命令：
    sudo npm install -g yarn react-native-cli

七、运行项目

  • 1、创建项目：
    react-native init helloworld
    • helloworld为项目名
  • 2、运行项目：
    • 启动本地库：
      react-native start
    • 启动模拟器：
      react-native run-ios
      react-native run-android

参考文章：
1、react-native 环境搭建配置（mac版 ）
2、Mac OS 搭建 React Native 环境

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容