安装配置React Native开发环境

步骤如下:

1、安装HomeBrew,命令如下:

JerryMacBook-Pro:~ Jerry.Yao$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

等待安装成功后验证一下brew的版本:

JerryMacBook-Pro:~ Jerry.Yao$ brew -v
Homebrew 1.3.8
Homebrew/homebrew-core (git revision eef61; last commit 2017-12-01)

2、安装Nodejs

进入 https://nodejs.org/en/download/ 选择Mac的版本下载(node-v8.9.1.pkg),并且安装好。
验证Nodejs是否安装成功,在终端输入命令:

JerryMacBook-Pro:~ Jerry.Yao$ node -v
v8.9.1

3、安装WatchMan检测bug

JerryMacBook-Pro:~ Jerry.Yao$ brew install watchman

如果输入上面的命令报如下,就按照提示安装好command line tools然后重新执行安装watchman的命令就可以了

Error: Xcode alone is not sufficient on Sierra.
Install the Command Line Tools:
  xcode-select --install

验证watchman是否安装成功,命令如下:

JerryMacBook-Pro:~ Jerry.Yao$ watchman -v
4.9.0

4、安装Flow(JavaScript的静态类型检查器,方便找出类型错误问题),命令如下:

JerryMacBook-Pro:~ Jerry.Yao$ brew install flow

5、安装React Native

JerryMacBook-Pro:~ Jerry.Yao$ sudo npm install -g react-native-cli

6、创建demo,cd到存放项目的目标文件夹里,然后执行命令:

// ReactNativeDemo是demo项目的名字
JerryMacBook-Pro:ReactNative Jerry.Yao$ react-native init ReactNativeDemo

7、等待片刻在目标文件夹里就生成了一个ReactNative的demo项目啦

这里写图片描述

按照提示运行项目,或者是直接打开对应的ios文件夹直接运行。

To run your app on iOS:
   cd /Users/Jerry.Yao/Documents/My/Project/ReactNative/ReactNativeDemo
   react-native run-ios
   - or -
   Open ios/ReactNativeDemo.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/Jerry.Yao/Documents/My/Project/ReactNative/ReactNativeDemo
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

8、开发工具推荐下载安装WebStorm,安装WebStorm代码提示插件,cd到一个目标文件夹里,然后输入如下命令clone

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

插件clone成功后,打开WebStorm在目标文件夹里选择ReactNative.jar, 步骤: File –> Import Settings –> ReactNative -LiveTemplate –> ReactNative.jar –> OK–> Restart,然后就可以在WebStorm里面愉快的玩耍了
这里写图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值