react native环境搭建(Mac + iOS)

2016-08-02  本文已影响332人  ChinaGoodStaff

使用react native 首先你需要准备的软件有Xcode(这个每个iOS开发者都很熟悉)、node.js、 the React Native command line tools、 Watchman。

建议安装 node 和 watchman 前安装 Homebrew.

在Homebrew安装成功后首先安装node

brew install node

localhost:~ luomeng$ brew install node

==> Downloading https://homebrew.bintray.com/bottles/node-6.3.1.el_capitan.bottl

######################################################################## 100.0%

==> Pouring node-6.3.1.el_capitan.bottle.tar.gz

==> Caveats

Please note by default only English locale support is provided. If you need

full locale support you should either rebuild with full icu:

`brew reinstall node --with-full-icu`

or add full icu data at runtime following:

https://github.com/nodejs/node/wiki/Intl#using-and-customizing-the-small-icu-build

Bash completion has been installed to:

/usr/local/etc/bash_completion.d

==> Summary

🍺  /usr/local/Cellar/node/6.3.1: 3,829 files, 39.8M

localhost:~ luomeng$

然后安装watchman,Watchman 是 facebook 的一个开源项目,它开源用来监视文件并且记录文件的改动情况,当文件变更它可以触发一些操作,例如执行一些命令等等。

brew install watchman

localhost:~ luomeng$ brew install watchman

==> Installing dependencies for watchman: pcre

==> Installing watchman dependency: pcre

==> Downloading https://homebrew.bintray.com/bottles/pcre-8.39.el_capitan.bottle.tar

######################################################################## 100.0%

==> Pouring pcre-8.39.el_capitan.bottle.tar.gz

🍺  /usr/local/Cellar/pcre/8.39: 203 files, 5.4M

==> Installing watchman

==> Downloading https://homebrew.bintray.com/bottles/watchman-4.6.0.el_capitan.bottl

######################################################################## 100.0%

==> Pouring watchman-4.6.0.el_capitan.bottle.tar.gz

🍺  /usr/local/Cellar/watchman/4.6.0: 21 files, 397.0K

localhost:~ luomeng$

NPM(node package manager),通常称为node包管理器。他可以让你可以安装带有界面的命令行工具

npm install -g react-native-cli


现在显示安装成功,如果遇到权限的问题,尝试使用sudo命令:sudo npm install -g react-native-cli.

接下来通过React Native 命令行工具创建一个React Native项目,然后在新建的项目文件夹里执行react-native run-iso

react-native init TestReactNative

cd TestReactNative

react-native run-iso

你很快就会在模拟器看到一个新的app,react-native run-ios只是一种运行项目的方式,你也可以通过xcode和Nuclide直接运行(这个代码一执行,会有好多代码,我就不截屏了)

现在已经成功运行app了,你就可以打开index.ios.js 文件去编辑

然后通过Command⌘ + R运行再在模拟器中看看效果

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

welcome: {

fontSize: 40,

textAlign: 'center',

margin: 10,

},

上一篇 下一篇

猜你喜欢

热点阅读