Mac下搭建react native开发环境

时间:2021-08-20 11:55:08

安装必需软件

Homebrew

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

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

homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

Node

使用Homebrew来安装Node.js.

brew install node

注意有坑:查看安装的node是否最新版本,默认安装的不是最新版本(我以为默认给我了最新(v8.00),其实默认只给我安装了v4.0.0,v4.0.0不支持ES6,当下面用react-native init <Project> 时会报语法错误

解决方法:

1、安装完node后使用命令查看当前版本

node -v

2、然后查看最新版本

npm info node

Mac下搭建react native开发环境

3、升级node

清除node.js的cache:

sudo npm cache clean -f

安装n工具,n是专门是管理node.js版本的

sudo npm install -g n

安装最新node版本

sudo n stable

Yarn、React Native的命令行工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

Android Studio

Ios程序员请绕过

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求,则可以到官网上下载。

具体安装步骤这里就不详细介绍,网上应该有很多教程。

ANDROID_HOME环境变量

环境变量很重要!要不项目跑不起来。

在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉vi操作,请点击这里http://www.eepw.com.cn/article/48018.htm

然后使用下列命令使其立即生效(否则重启后才生效):

source ~/.bash_profile

可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

Xcode

Android程序员请绕过

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode
IDE和Xcode的命令行工具。虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools

Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties

测试安装

react-native init AndroidProject
cd AndroidProject
react-native run-android

提示:你可以使用--version参数创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

init命令默认会创建最新的版本,而目前最新需要下载boost库编译。此库体积庞大,在国内即便*也很难下载成功,导致很多人无法正常运行iOS项目,中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。

react-native init AndroidIos --verison 0.44.3
cd AndroidIos
react-native run-ios/run-android

运行结果如下:

Mac下搭建react native开发环境     Mac下搭建react native开发环境

推荐安装的工具

Webstorm

WebStormjetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript
IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

WebStorm属于收费开发工具,但是有一个月的试用时间。(webstorm.2017.1.4网上有破解版本,大家可斟酌下载使用)

配置JSX支持

WebStorm->Preferences->Languaes&Frameworks->JacaScript,然后选择ReactJSX,下载安装react,react native

Mac下搭建react native开发环境

Mac下搭建react native开发环境

配置Run Configurations

在菜单栏中找到Edit Configurations

Mac下搭建react native开发环境

Mac下搭建react native开发环境

Mac下搭建react native开发环境

最后选择平台运行项目

Mac下搭建react native开发环境

参考文档:http://reactnative.cn/docs/0.46/getting-started.html#content