iOS随笔

React Native 入门指北

2017-09-02  本文已影响11人  cc412

React Native 是老生常谈的一个词了。之前接触过但是项目中并没有用到过。最近要换工作了,梳理下知识点。重新学习一下RN。这篇文章只是入门级别,从环境安装到简单示例。大神请绕行~

RN

React Native是Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native。,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用。简称RN
(注意不要和RAC搞混了ReactiveCocoa

React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
也就是一份代码两个平台。学会后Android和iOS通吃。

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
安装完成

建议定期运行 brew update && brew upgrade 来使您的应用程序保持最新状态。

我这里默认你有iOS开发环境,有Xcode开发工具。
OS X下搭配安卓开发环境可以看安卓安装指南

首先创建一个RN的项目,终端中执行

npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject/

执行完成以后你就会在你的用户目录下找到新建的项目

image.png 项目地址

然后用Xcode打开 运行
如果运行顺利,那么恭喜你已经成功运行了第一个RN项目。如果了以下错误

error
我们要慢慢解决
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
编译成功!

(未完待续)

上一篇下一篇

猜你喜欢

热点阅读