快速搭建ReactNative跨平台开发iOS


ReactNative可以进行跨平台开发iOS和安卓,Mac搭建简单如下

  • 安装HomeBrew
  • 安装Node.js
  • 安装watchman 和 flow
  • 安装React Native CLI

快速搭建ReactNative跨平台开发iOS_第1张图片
1. 安装HomeBrew

这是安装包管理器,安装后可以方便后续安装包的安装,HomeBrew官网安装命令
终端命令

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.安装Node.js
(1) Node.js安装方式一

直接使用HomeBrew安装
可尝试使用终端命

brew install node

如不行可尝试第二种方式安装Node.js

(2)Node.js安装方式二

先安装nvm,再使用nvm安装和维护升级Node.js(官方文档所述使用的便是这种方法)

步骤1 安装nvm
终端命令

brew install nvm

如图:


快速搭建ReactNative跨平台开发iOS_第2张图片
下载完毕nvm后的警告Caveats

看到一个警告Caveats
意思是:需要创建一个NVM目录,然后添加以下信息“export NVM_DIR= ……”到配置文件
那么
创建nvm目录mkdir ~/.nvm
打开所述配置文件open ~/.bash_profile
发现没有配置文件,创建配置文件
cd
touch ~/.bash_profile

创建好配置文件后打开,添加信息
open ~/.bash_profile

快速搭建ReactNative跨平台开发iOS_第3张图片
添加配置信息

ls -a查看隐藏文件,OK,NVM安装好了

快速搭建ReactNative跨平台开发iOS_第4张图片

步骤2 使用nvm安装Node.js

终端命令

nvm install node && nvm alias default node

等待……安装完毕

3. 安装watchman 和 flow

watchman是React修改source文件的一个工具
安装终端命令

 brew install watchman

flow是一个JavaScript 的静态类型检查器
安装终端命令

brew install flow

关于brew update && brew upgrade命令
官方文档建议定期运行brew update && brew upgrade 来使您的应用程序保持最新状态。

4. 安装React Native CLI

这是个用来开发React Native的命令行工具
安装终端命令:

npm install -g react-native-cli

O(∩_∩)O哈哈~大功告成,来一个跨平台项目

在当前目录新建一个项目

react-native init HelloReactNative
图示

完成之后打开这一个项目,同时看到了android和ios

快速搭建ReactNative跨平台开发iOS_第5张图片
点击运行iOS里的.xcodeproj

注:React Native - iOS运行目前需要Xcode 7.0 或更高版本。

iOS运行结果:

如图O(∩_∩)O哈哈~

快速搭建ReactNative跨平台开发iOS_第6张图片
React Native - iOS开发界面

--end--


你可能感兴趣的:(快速搭建ReactNative跨平台开发iOS)