首页 > 代码库 > React Native 初学-环境搭配

React Native 初学-环境搭配

一、环境需求

1.1 安装HomeBrew

安装方式

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

 

1.2、安装npmNode.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...等等

React Native 初学-环境搭配