react-native-导航

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

2018-08-19  本文已影响0人  小小小鸡腿

基本环境安装

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 <ProjectName> [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可以查看当前版本

开发工具下载

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. 如果运行起来一片红,如下图


    运行错误

解决方法:

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

上一篇下一篇

猜你喜欢

热点阅读