React Native 入门指北
React Native 是老生常谈的一个词了。之前接触过但是项目中并没有用到过。最近要换工作了,梳理下知识点。重新学习一下RN。这篇文章只是入门级别,从环境安装到简单示例。大神请绕行~
![](https://img.haomeiwen.com/i525360/3e7b998391b476c8.png)
-
React Native是什么
React Native是Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native。,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用。简称RN
(注意不要和RAC搞混了ReactiveCocoa)
-
React Native好处是啥
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
也就是一份代码两个平台。学会后Android和iOS通吃。
-
React Native环境搭建
1.必须是OS X系统(iOS开发者有天然的优势)
2.安装 Homebrew 。终端输入以下命令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
3.使用Homebrew安装nvm
brew install nvm
4.使用Homebrew安装watchman(不强制)
brew install watchman
5.使用Homebrew安装flow(不强制)
brew install flow
6.安装 Node.js
在终端输入(它可以让您安装最新版本的 Node.js 并设置您的终端,所以你可以通过键入 node 来运行它。使用 Nvm 可以让您安装多个版本的 Node.js 并且在它们之间轻松切换。)
nvm install node && nvm alias default node
如果出现下方错误
nvm: command not found
请执行下方语句并重启终端 然后再次执行 nvm install node && nvm alias default node
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash
![](https://img.haomeiwen.com/i525360/46b2aaa2c929879d.png)
建议定期运行 brew update && brew upgrade 来使您的应用程序保持最新状态。
-
React Native Demo
我这里默认你有iOS开发环境,有Xcode开发工具。
OS X下搭配安卓开发环境可以看安卓安装指南
首先创建一个RN的项目,终端中执行
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject/
执行完成以后你就会在你的用户目录下找到新建的项目
![](https://img.haomeiwen.com/i525360/3ce99b65f55a7fe7.png)
![](https://img.haomeiwen.com/i525360/75c0ce6f58fe3bb6.png)
然后用Xcode打开 运行
如果运行顺利,那么恭喜你已经成功运行了第一个RN项目。如果了以下错误
![](https://img.haomeiwen.com/i525360/77a9c7ddc96ddf13.png)
我们要慢慢解决
Git上面的讨论
https://github.com/facebook/react-native/issues/4968
一些资料 这个博主把一些包放到网盘上 下载下来然后替换本地的,但是并没有解决问题。
http://vanessa.b3log.org/articles/2017/06/12/1497235254333.html
最后看以下的解决了:
How Can I fix This?
Clear watchman watches: watchman watch-del-all.
Delete the node_modules folder: rm -rf node_modules && npm install.
Reset packager cache: rm -fr $TMPDIR/react-* or `npm start -- --reset-cache
就是cd到新建的项目目录下
watchman watch-del-all
rm -rf node_modules && npm install
rm -fr $TMPDIR/react-
然后回到Xcode Clean&Run
编译成功!
(未完待续)