安装配置 - ReactNative

ReactNative和React的关系

React用于web应用开发,ReactNative采用React方式进行移动应用开发.
ReactNative采用React预发,用于进行JavaScript跨终端应用开发,既拥有原生Native的交互体验,又能够保留React的开发效率.使用灵活的Html和Css布局,使用React语法构建组件,然后同时运行在Ios和Android平台上.

ReactNative安装前提

Mac下安装Homebrew(非必须)
安装操作

1
2
3

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
[elonsu@localhost ~ ]$ brew -v
Homebrew 0.9.5 (git revision a8d6; last commit 2016-03-15)

建议不定时的更新

1	[elonsu@localhost ~]$ brew update && brew upgrade

安装NodeJs
安装react前需要保证已经安装了nodeJs,下载地址:https://nodejs.org/en/

1	[elonsu@localhost ~]$ brew install node

ReactNative安装

mac系统安装react-native

1
2
3

[elonsu@localhost ~ ]$ node --version
v7.2.0
[elonsu@localhost ~ ]$ sudo npm install -g react-native-cli

安装Watchman和Flow,监控文件变化和类型检查的。

1 2	[elonsu@localhost ~ ]$ brew install watchman [elonsu@localhost ~ ]$ brew install flow

ReactNative创建项目

初始化项目使用命令react-native init 工程名称

1	[elonsu@localhost wuyu-platform (master ✗)]$ react-native init wuyuApp

初始化完会看到如下提示:

To run your app on iOS:
   react-native run-ios
   - or -
   Open ios/wuyuApp.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

启动调试

[elonsu@localhost wuyu-platform (master ✗)]$ cd wuyuApp
[elonsu@localhost wuyuApp (master ✗)]$ ls
__tests__        android          index.android.js index.ios.js     ios              node_modules     package.json
[elonsu@localhost wuyuApp (master ✗)]$ react-native run-ios
[elonsu@localhost wuyuApp (master ✗)]$ react-native run-android

ReactNative开发工具

推荐开发工具Atom,下载地址:https://atom.io/
Atom常用插件推荐:

open-in-browser: 浏览器浏览功能
atom-html-preview: 分屏展示html页面效果
autocomplete-path: 文件路径补全

ReactNative资料

React官网: https://facebook.github.io/react/
ReactNative中文网: http://reactnative.cn/