基本环境安装
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可以查看当前版本
开发工具下载
- 安卓开发: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模拟器,并自动打开一个窗口,这个窗口主要是运行包管理器,向模拟器同步代码
同步代码
可能会出现的问题
- 如果遇到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/
即可解决 -
如果运行起来一片红,如下图
运行错误
解决方法:
- 打开两个终端
-
第一个终端输入react-native start
启动完成 - 第二个终端输入react-native run-ios运行
运行成功
注意:两个终端都需要cd到项目目录哦
网友评论