Mac下搭建react native开发环境
2017-07-31 14:27
148 查看
安装必需软件
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
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[/code]
运行结果如下:
推荐安装的工具
Webstorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
WebStorm属于收费开发工具,但是有一个月的试用时间。(webstorm.2017.1.4网上有破解版本,大家可斟酌下载使用)
配置JSX支持
WebStorm->Preferences->Languaes&Frameworks->JacaScript,然后选择ReactJSX,下载安装react,react native配置Run Configurations
在菜单栏中找到Edit Configurations最后选择平台运行项目
参考文档:http://reactnative.cn/docs/0.46/getting-started.html#content
相关文章推荐
- 【Android学习笔记】Mac下Android Studio开发环境搭建
- Mac OS tensorflow的环境搭建
- Mac OS X下搭建Android开发环境(包括SDK和NDK)
- Mac环境中搭建Hadoop相关问题及处理办法
- mac下php环境搭建
- mac搭建cocos2d-x安卓开发环境
- Mac平台的Lua开发环境搭建
- 【iOS-cocos2d-X 环境配置】在Mac下结合Xcode搭建Cocos2d-X开发环境!
- mac搭建svn服务器
- [自动化]Mac 下搭建 Chrome + selenium 完成web页面自动化
- mac+virtualbox+centos7+docker搭建lnmp环境
- Mac下使用brew搭建PHP7+nginx+mysql开发环境
- Mac openCV环境搭建
- mac下android环境搭建笔记(android studio)
- 在mac上搭建python环境
- MAC下搭建discuz论坛
- 磨刀:mac 上简洁搭建ejabberd 环境
- 在mac上搭建python环境
- 苹果系统MAC 搭建php开发环境