配置React Native的开发环境以及创建项目

2018-03-16  本文已影响5人  悟2023

必备安装软件

一、Homebrew

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

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

二、安装npm 和 Node

使用Homebrew来安装Node.js,或者可以下载pkg安装包进行安装Node.js。Node安装成功后npm自动也就有了。

brew install node

安装完Node后建议设置npm镜像以加速后面的过程

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

三、安装WatchMan

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。
注:此工具官方虽然是推荐安装,但在实践中,我们认为此工具是必须安装,否则可能无法正常开发。

brew install watchman

三、安装Flow

Flow是一个静态的JS类型检查工具。
注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

brew install flow
必备安装软件

配置React Native的开发环境

一、安装React Native

sudo npm install -g react-native-cli

二、创建React Native的应用

react-native init MyAppName
配置React Native的开发环境

注:最后几行中描述了如何运行对应环境的方法。

扩展:

管理React Native库的版本

在开发中,会经常的去控制React Native的版本库,得以适配各种条件下的开发,那该如何查看、控制ReactNative的版本呢?

1、查看本地的React Native的版本
react-native --version
查看本地的React Native的版本
2、更新本地的React Native的版本
sudo npm update -g react-native-cli
3、查询react-native的npm包最新版本

npm的全称是Node Package Manager ,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
npm包地址 :https://www.npmjs.com/package/react-native

命令行查询

sudo npm info react-native

项目中查看


image.png
4、升级或者降级npm包的版本
sudo npm install --save react-native@0.18
5、更新项目templates文件

新的npm包会包含更新在运行react-native init命令生成的一些动态文件,例如init创建项目的时候会生成iOS和Android的子项目,我们可以通过以下的命令进行获取最新的代码

react-native upgrade
6、WebStom设置React Native代码提示

6.1 从gitHub上下载xml插件
https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
6.2 安装
将ReactNative.xml复制到 ~/Library/Preferences/WebStorm10/templates ,然后重启 WebStrom。

上一篇下一篇

猜你喜欢

热点阅读