ReactNative作为移动端很热门的框架,也已经出来很长时间了。React Native 可以通过更新远端JS,直接更新app, 用 JavaScript 调起 native 组件,将增强与高性能组件交给 native 来处理 . 相比其他 hybrid 框架而言, ReactNative并非通过 webview 来调用原生组件,而是直接调用操作系统自带的 javascriptCore, 所以更高效。
为了探一探真面目,我们来研究一下在Mac上如何搭建开发环境:
如果英文好的可以查看 React Native官方文档 ,官方网站会提供最新的安装参考。
必须安装的依赖有:Node、Watchman 和 React Native 命令行工具以及 Xcode。
我们一步一步来:
1.安装Xcode
打开 App Store,在 App Store 中搜索 Xcode,点击 Xcode ,登录apple账号后直接下载安装即可,不多言。
2.安装Homebrew(官方推荐用Homebrew来安装Node 和 Watchman)
打开终端,输入
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
然后然后一路回车,会让输入密码,这个密码是登陆系统的密码,输入密码之后回车开始安装 等待。。。
安装之后,可以brew -v查看一下版本
CarydeMacBook-Pro:~ cary$ brew -v
Homebrew 2.0.5
3.安装 Node 和 Watchman
brew install node
brew install watchman
这两步我安装挺顺利的,应该是没什么问题。。。
4.安装 Yarn、React Native 的命令行工具(react-native-cli)
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
brew install yarn
安装yarn的时候可能会失败,原因是连接超时,此时可以改一下镜像源,再install:
PHANTOMJS_CDNURL=http://npm.taobao.org/mirrors/phantomjs
brew install yarn
安装 React Native 命令行工具
sudo npm install -g react-native-cli
这样大概RN环境就大概搭建好了(),接下来创建一个项目
创建项目
1.首先在桌面创建一个名为rn_demo的文件夹
2.在终端静如创建的文件夹
cd /Users/cary/Desktop/rn_demo
3.创建一个叫HelloWord的项目
react-native init HelloWord
打开项目并运行
通过rn_demo->HelloWorld->ios->Helloworld.xcodeproj用Xcode打开运行
可能会遇到的问题:运行模拟器会出现红屏,显示could not connect to development server的问题
解决方法:先关掉项目,重新打开终端,cd到当前项目 然后npm start,server终端会自己打开的 然后再打开运行项目
当出现以下所示状态时说明已成功
打开App.js编程
项目运行起来, 打开App.js就可以进行编程了, 编程了直接 command+R运行即可.
到此为止,React Native 环境已经搭建好了, 并可以进行 React Native 的开发啦!