Mac搭建React Native开发环境和错误解决

基本环境安装

1.安装Homebrew(这是安装Node.js和其他工具的基础环境)

打开终端，输入以下指令

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

经过漫长的等待，大概下载了十几分钟吧。所以不要着急。下载完会有如下success的提示

成功安装

注意：中间会有按一下回车的提示，敲下回车就可以了

2.安装Node.js

如果上一步Homebrew不成功的话会提示

-bash: brew: command not found

安装Node.js命令如下

brew install node

这里可能会自动更新一下Homebrew，等着就行了。安装完成之后可以通过以下命令查看安装的Node.js的版本

npm -v

3.安装React Native命令行工具

通过npm包管理工具进行安装

npm install -g react-native-cli

命令行工具安装完成之后，可以通过react-native --help来查看所有命令

  Usage: react-native [command] [options]


  Commands:

    init  [options]  generates a new project and installs its dependencies

  Options:

    -h, --help    output usage information
    -v, --version output the version number

比如：可以直接通过init后面跟项目名称初始化一个RN项目，-h可以查看帮助文档，-v可以查看当前版本

开发工具下载

• 安卓开发：Android Studio
• iOS开发：通过App Store直接搜索下载

React Native应用快速构建

1.初始化项目

首先cd到你需要创建项目的目录，比如 cd Desktop/ 创建到桌面
输入命令行，其中FirstApp就是你的项目名称

react-native init FirstApp

安装完成后会有如何运行项目的提示信息

To run your app on iOS:
   cd /Users/mazheng/Desktop/FirstApp
   react-native run-ios
   - or -
   Open ios/FirstApp.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/mazheng/Desktop/FirstApp
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

2.命令行运行RN项目

首先cd到项目目录，比如cd到上面创建的FirstApp文件夹，运行命令(iOS为例)

react-native run-ios

之后会启动iPhone模拟器，并自动打开一个窗口，这个窗口主要是运行包管理器，向模拟器同步代码

同步代码

可能会出现的问题

1. 如果遇到error: unable to find utility "instruments", not a developer tool or in PATH错误信息，可输入指令解决sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/如果电脑上安装多个版本的Xcode，可替换命令中的Xcode为你想要运行的版本，如电脑上还存在Xcode8.3，可修改命令为sudo xcode-select -s /Applications/Xcode8.3.app/Contents/Developer/即可解决

2. 如果运行起来一片红，如下图

   
   
   运行错误

解决方法：

• 打开两个终端

• 第一个终端输入react-native start

  
  
  启动完成
• 第二个终端输入react-native run-ios运行
  
  运行成功

注意：两个终端都需要cd到项目目录哦