React Native 初学-环境搭配

一、环境需求

1.1 、安装HomeBrew

安装方式

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

 

1.2、安装npm和Node.js :  

 Node.js安装地址：

https://nodejs.org/en/download/

 

安装位置：

Node.js was installed at

 

   /usr/local/bin/node

 

npm was installed at

 

   /usr/local/bin/npm

 

Make sure that /usr/local/bin is in your $PATH.

 

1.3、安装WatchMan :

该空间用于监控bug和文件变化，并且可以触发指定的操作

安装方式：

brew install watchman

安装完成出现：

1.4、安装Flow:

flow是一个JavaScript的静态类型检查器，建议安装，方便找到代码中可能存在的错误

安装方式：

brew install flow

出现：

 

二：React Native 安装

1.1、安装React Native :

sudo npm install -g react -native-cli

三：iOS开放环境需求

 Xcode 7及其以上版本

 

 四： React Native 使用

1：执行命令，生成一个项目

React-native init 项目名称

注意：react-native 命令会从npm官方源拖代码会，可以将npm仓库替换为国内镜像

npm config set registry https://registry.npm.taobao.org

npm config set disturl  https://npm.taobao.org/dist

 

React Native 操作命令：

查看版本: react -native  --version

更新本地版本： npm update -g react-native-cli

查询react-native 的npm包最新版本地址：

npm包地址：https://www.npmjs.com/package/react-native

命令查询:npm info react-native

升级或者降级npm包的版本：npm install --save react-native@xx(版本号)

五： WebStrom 下载地址：

http://www.jetbrains.com/webstorm/download/download-thanks.html?platform=mac

 

六：WebStrom下的代码提示工具

git下载xml插件：

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

Mac下安装

将ReactNative.xml复制到 ~/Library/Preferences/WebStorm11/templates 重启 WebStrom

使用方法

通用方法

直接输入组件 或 Api 名称的首字母, 比如想要 View ,只要输入 V自动提示代码里就会看到 View

StyleSheet属性提示

首先 按下 command + J , 然后输入属性名的 首字母

如: 输入 f ,会自动提示 fontSize,fontFamily,fontStyle...等等