react-native入门教程[一]

相信看到这篇文章的人都不用再去详细介绍React-Native是何物吧,就开发平台而言对mac os的支持比较好,window上的支持还不怎么完善,window看这里

1. 配置环境

1.1安装Homebrew

在终端下执行下面命令,或者从http://brew.sh/安装

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1.2 安装nodeJS (版本必须>4.0,通过node  -v查看版本号)

*通过Homebrew安装

brew install node

*通过pkg安装包安装: http://nodejs.cn/

1.3 安装watchman

brew install watchman

2.安装react-native

由于网络问题,react-native命令行从npm官方源拖代码时时间比较久,建议改成taobao的镜像地址

npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist

安装react-native插件

sudo npm install -g react-native-cli

3. 创建项目

react-native init AwesomeProject

到指定目录下执行以上命令,不然默认当前目录,AwesomeProject是项目名称, 创建后目录如下

4.运行项目

-运行iOS应用

$ cd AwesomeProject
用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。
使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。
在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

-运行Android应用

$ cd AwesomeProject
$ react-native run-android
使用你喜欢的文本编辑器打开index.android.js并随便改上几行
按Menu键(通常是F2,在Genymotion模拟器中是⌘+M)然后选择 Reload JS 就可以看到你的最新修改。
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

参考:http://reactnative.cn/docs/getting-started.html#content