一、寫(xiě)在前面
1. 什么是React-Native？
React-Native是：Facebook 在2015年初React.js技術(shù)研討大會(huì)上公布的一個(gè)開(kāi)源項(xiàng)目。支持用開(kāi)源的JavaScript庫(kù)React.js來(lái)開(kāi)發(fā)iOS和Android原生App。初期僅支持iOS平臺(tái)，同年9月份，該開(kāi)源項(xiàng)目同時(shí)支持Android平臺(tái)。
React Native的原理是：在JavaScript中用React抽象操作系統(tǒng)原生的UI組件，代替DOM元素來(lái)渲染，比如以<View>取代<div>，以<Image>替代<img>等。
2.React-Native有啥優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)是：能夠用JavaScript腳本就可以寫(xiě)出App的界面，對(duì)從事Web開(kāi)發(fā)的同事們轉(zhuǎn)行做幾個(gè)簡(jiǎn)單的移動(dòng)App是個(gè)福利。不用為了寫(xiě)個(gè)移動(dòng)App小程序而專(zhuān)門(mén)去學(xué)習(xí)Objective-C和Swift。
和其他的移動(dòng)Web框架相比：
Native不用WebView，徹底擺脫了WebView讓人不爽的交互和性能問(wèn)題；
Native的原生控件有更好的體驗(yàn)；
Native有更好的手勢(shì)識(shí)別；
Native有更適合的線(xiàn)程模型；
缺點(diǎn)是：還在試用階段，潛在的問(wèn)題尚不得而知：兼容性問(wèn)題，性能問(wèn)題等。還沒(méi)大量普及，學(xué)習(xí)資料尚且不多，供愛(ài)折騰的朋友嘗嘗鮮。
3.要學(xué)些什么？
想必，大家已經(jīng)按耐不住，會(huì)發(fā)問(wèn)，使用React-Native開(kāi)發(fā)要學(xué)習(xí)些什么呢？
Html+CSS+JavaScript的基本功肯定是少不了；
Node.js的基本概念學(xué)習(xí)。API文檔：https://nodejs.org/dist/v4.2.2/docs/api/
JSX: JavaScript語(yǔ)法的一個(gè)擴(kuò)展，類(lèi)似XML結(jié)構(gòu)。https://facebook.github.io/react/docs/jsx-in-depth.html
FLUX: Facebook公司的一個(gè)創(chuàng)建用戶(hù)客戶(hù)端web程序的框架。https://facebook.github.io/flux/docs/overview.html
二、React Native基礎(chǔ)環(huán)境搭建
1、安裝Homebrew
打開(kāi)終端輸入：
|
1
|
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" |
2、安裝nvm方法
通過(guò)腳本安裝方式，在終端執(zhí)行：
|
1
|
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash |
激活nvm,在安裝腳本執(zhí)行完之后，在終端執(zhí)行:
|
1
|
. ~/.nvm/nvm.sh |
3、默認(rèn)安裝最新版本的Node.js并且設(shè)置好命令行的環(huán)境變量
|
1
|
nvm install node && nvm alias default node |
可以輸入node命令啟動(dòng)Node.js環(huán)境
4、安裝watchman
在終端輸入：
|
1
|
brew install watchman |
到此處React Native基礎(chǔ)環(huán)境搭建基本完成，推薦經(jīng)常運(yùn)行brew update && brew upgrade命令保持你的程序是最新的。
三、iOS開(kāi)發(fā)環(huán)境
1、iOS開(kāi)發(fā)環(huán)境： （默認(rèn)讀者已經(jīng)安裝Xcode7.0或以上版本，沒(méi)有可自行前往AppStore下載）
使用npm（node包管理工具）安裝react-native-cli(此處應(yīng)注意權(quán)限問(wèn)題，如果遇到權(quán)限問(wèn)題，請(qǐng)?jiān)谙旅娴拿钋凹由蟬udo)
|
1
|
npm install -g react-native-cli |
初始化工程（下面的語(yǔ)句中千萬(wàn)不要加sudo，后果自負(fù)）
|
1
|
react-native init ReactNativeProject（工程名） |
在初始化的過(guò)程中，如果進(jìn)度緩慢，推薦你將npm倉(cāng)庫(kù)源換成國(guó)內(nèi)鏡像：(翻墻用戶(hù)請(qǐng)忽略) 在終端輸入：
|
1
2
|
npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist |
2、使用Xcode運(yùn)行調(diào)試程序
查找ReactNativeProject文件目錄
按住快捷鍵Command+Shift+G，在彈出的“前往文件夾”對(duì)話(huà)框中輸入路徑/Users/yangshebing/ReactNativeProject（yangshebing表示電腦用戶(hù)名，請(qǐng)自行更改）,點(diǎn)擊前往。在文件目中的ios文件夾下找到“ReactNativeProject.xcodeproj”工程文件。如圖所示：
運(yùn)行ReactNativeProject工程
使用Xcode打開(kāi)“ReactNativeProject.xcodeproj”工程文件，按住快捷鍵"Command+R"運(yùn)行此項(xiàng)目，運(yùn)行成功后便可在模擬器上看到效果。
編輯index.ios.js文件修改界面
筆者編輯index.ios.js文件工具是Vim，每當(dāng)編輯完index.ios.js文件并保存之后，在模擬器(Simulator)中，按Command+R可刷新界面查看改變后的效果。
下面我們也試著稍微修改一下index.ios.js文件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
/** * Sample React Native App * https://github.com/facebook/react-native */'use strict';import React, { AppRegistry, Component, StyleSheet, //添加Image全局變量 Image, Text, View} from 'react-native';class ReactNativeProject extends Component { render() { return ( <View style={styles.container}> //添加文本展示 <Text style={styles.welcome}> 美女 </Text> //添加圖片展示 <Image source= //這里需要指定圖片的大小 style={styles.picture} /> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, //這里可以設(shè)置文本的字體，對(duì)齊方式等 welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, //新增圖片style，設(shè)置圖片大小 picture: { width: 80, height: 150, },});AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject); |
刷新后運(yùn)行效果如下圖所示：
真機(jī)運(yùn)行調(diào)試項(xiàng)目
在ReactNativeProject工程中找到AppDelegate.m文件，將localhost替換成自己電腦的IP地址。
|
1
2
3
|
// jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; jsCodeLocation = [NSURL URLWithString:@<a href="http://192.168.31.168:8081/index.ios.bundle?platform=ios&dev=true">http://192.168.31.168:8081/index.ios.bundle?platform=ios&dev=true</a>]; |
替換完成之后再次運(yùn)行程序，這個(gè)時(shí)候可以通過(guò)搖晃設(shè)備喚出開(kāi)發(fā)菜單。
禁用開(kāi)發(fā)菜單
在打包提交市場(chǎng)前，需要禁用開(kāi)發(fā)菜單。禁用開(kāi)發(fā)菜單方法如下： 打開(kāi)工程，選擇Product → Scheme → Edit Scheme或使用快捷鍵“Command + <”,在彈出的窗口中選擇左邊的Run菜單項(xiàng)。更改“Build Configuration” 設(shè)置項(xiàng)為“Release”。
總結(jié)
好了，看到這里，如果你已經(jīng)成功配置了React-Native的環(huán)境，并且新建并成功運(yùn)行了第一個(gè)程序了。那么，就先恭喜了，我們甚至沒(méi)有寫(xiě)一行代碼，就已經(jīng)成功運(yùn)行了第一個(gè)React-Native的程序，是不是還挺簡(jiǎn)單的。正所謂，良好的開(kāi)端是成功的一半。如果有問(wèn)題大家可以留言交流。
