一、环境需求
1.1 安装Homebrew(资源管理器)
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
检查是否安装成功
$ brew -v
1.2 安装npm 和 Node.js(服务端的JavaScript运行环境)
安装Node.js,node安装成功后npm自动就有了,直接下载安装Node.js,网址:https://nodejs.org/en/download/
1.3 安装[WatchMan],辅助开发(React修改source文件的一个工具)
该插件用于监控bug文件
和文件
变化 ,并且可以触发指定的操作
$ brew install watchman
注意:在OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到碰到/usr/local目录不可写的权限问题。可以用下面的命令修复:
$ sudo chown -R
`whoami` /usr/local
1.4 安装[Flow]
JavaScript 的静态类型检查器,方便找出代码中可能存在的类型错误
brew install flow
二、React Native安装
2.1 安装React Native
$ npm install -g react-native-cli
出现权限不够错误npm ERR! Error: EACCES: permission denied
加sudo
获得最高权限
三、React Native的第一个应用
3.1 执行命令,生成一个工程
$ react-native init 项目名称
注意:从npm官方源初始化代码时会很卡,可以把npm仓库源替换成淘宝镜像:
$ npm config set registry https://registry.npm.taobao.org
$ npm config set disturl https://npm.taobao.org/dist
3.2 目录结构分析:
a)默认生成android和ios两个平台的原生项目;
b)index.android.js
和index.ios.js
文件为Android和iOS的空壳应用文件;
c)node_modules
文件夹,是为Node.js存放和管理npm包资源,Rect和React Native所有组件。
四、运行工程文件
不管是 iOS 还是 Android,在开发调试阶段,都需要在 Mac 上启动一个 HTTP 服务,称为Debug Server,默认运行在 8081 端口,APP 通 Debug Server 加载 js
-
cmd+ctrl+z
重新加载reload
只需要修改index.ios.js文件
五、管理React Native库的版本
5.1 查看本地的React Native的版本
$ react-native --version
5.2 更新本地的React Native的版本
$ npm update -g react-native-cli
5.3 查询react-native的npm包最新版本
npm(Node Package Manager )是一个node.js包管理和分发工具,已经成为了非官方的发布node模块(包)的标准
npm包地址 :$ https://www.npmjs.com/package/react-native
命令行查询:$ npm info react-native
项目中查看
$ npm -v
当前版本
$ npm install npm@4.0.3 -g
,升级到指定版本
$ sudo npm update npm -g
,升级到最新版本
5.3 更新项目templates文件(可选)
新的npm包会包含更新在运行react-native init命令生成的一些动态文件
例如init创建项目的时候会生成iOS和Android的子项目,通过以下的命令进行获取最新的代码:
react-native upgrade
六、WebStom设置React Native代码提示
6.1 从github上下载xml插件
$ git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
6.2 安装
将ReactNative.xml
复制到~/Library/Preferences/WebStorm10/templates
或多放一份到options文件夹
然后重启WebStrom