ReactNative 搭建开发环境

2018-09-10  本文已影响15人  二斤寂寞

Homebrew

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

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

译注:在 Max OS X 10.11(El Capitan)版本中,homebrew 在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

Node

使用 Homebrew 来安装Node.js.

React Native 目前需要 NodeJS 5.0 或更高版本。本文发布时 Homebrew 默认安装的是最新版本,一般都满足要求。

brew install node

安装完 node 后建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!

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

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

如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的 homebrew 译注,修复/usr/local目录的所有权:

sudo chown -R `whoami` /usr/local

推荐开发工具 WebStorm

WebStorm2018 for Mac 破解安装
WebStorm 提示react-natview语法插件

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate.git

Mac下安装

安装路径

ReactNative.xml复制到 ~/Library/Preferences/WebStorm11/templates
ReactNative.xml复制到 ~/Library/Preferences/WebStorm2016.2/templates
ReactNative.xml复制到 ~/Library/Preferences/WebStorm2017.1/templates
ReactNative.xml复制到 ~/Library/Preferences/WebStorm2017.2/templates
重启 WebStorm

测试安装

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

使终端支持git命令

安装git比较简单,当你在终端输入# git 时,系统会提示安装Command Line Tools(未安装过此工具),此时只要点击确定,等该工具安装完成那么git也就可以在终端中使用了

Xcode

作为iOS开发,xcode就自行下载即可。

Android

配置Mac下Android环境

上一篇下一篇

猜你喜欢

热点阅读