搭建配置React Native环境

本环境配置使用的系统为Mac OS X系统

一:安装node.js


https://nodejs.org/en/

搭建配置React Native环境_第1张图片

选择下载推荐人数最多版本或最新版本均可

安装过程很简单,就不一一介绍了

二:安装Homebrew


在mac终端输入命令安装Homebrew

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

安装过程中会出现下图页面:回车继续其他键终止,此时单击回车

搭建配置React Native环境_第2张图片

之后会有提示需要管理员权限让您输入密码,输入之后继续安装,耐心等待会出现下图信息

搭建配置React Native环境_第3张图片

三:安装watchman和flow


输入命令 brew install watchman

                    brew install flow

 如下图:

搭建配置React Native环境_第4张图片

四:通过npm安装react-nactive-cli 命名行工具


输入命令 sudo npm install -g react-native-cli


搭建配置React Native环境_第5张图片

注:因为需要经常切换Node.js版本,所以建议使用NVM来管理Node.js版本

下载地址:https://github.com/cnpm/nvm

在命令行输入 git clone https://github.com/cnpm/nvm

搭建配置React Native环境_第6张图片

输入:cd nvm

source nvm.sh

具体命令功能描述 如下图不做过多解释

搭建配置React Native环境_第7张图片

五:建立第一个项目


在命令行输入cd ..返回上一级,输入:react-native init Hello  创建一个Hello为名的项目


搭建配置React Native环境_第8张图片

如图项目地址 在/User/vicool路径内


搭建配置React Native环境_第9张图片

此时运行Hello文件中的iOS xode文件可以看到启动了一个终端React Packager 和一个模拟器


搭建配置React Native环境_第10张图片

我们可以使用sublime text 或者 自带文本 编辑打开index.ios.js文件  将Welcome to React Native! 改为“我的第一个 React Native”  此时使用 command + R 快捷刷新,会立即显示“我的第一个 React Native”字样,说明修改成功,成功编译了我们第一个native程序!


搭建配置React Native环境_第11张图片

你可能感兴趣的:(搭建配置React Native环境)