1.搭建開發(fā)環(huán)境
必需安裝的軟件
1.1 Homebrew
Mac系統(tǒng)的包管理器秒赤，用于安裝NodeJS和一些其他必需的工具軟件甸鸟。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1.2Node
brew install node
安裝完node后建議設(shè)置npm鏡像以加速后面的過(guò)程（或使用科學(xué)上網(wǎng)工具）也物。注意：不要使用cnpm搁吓！cnpm安裝的模塊路徑比較奇怪俐填，packager不能正常識(shí)別！
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
1.3 Xcode
React Native目前需要Xcode 8.0 或更高版本趟径。你可以通過(guò)App Store或是到Apple開發(fā)者官網(wǎng)上下載。這一步驟會(huì)同時(shí)安裝Xcode IDE和Xcode的命令行工具癣防。
測(cè)試安裝并運(yùn)行
Ｎ锨伞！蕾盯！注意Ｄ灰佟！级遭！：init命令默認(rèn)會(huì)創(chuàng)建最新的版本望拖，而目前最新的0.45及以上版本需要下載boost等幾個(gè)第三方庫(kù)編譯。這些庫(kù)在國(guó)內(nèi)即便翻墻也很難下載成功挫鸽，導(dǎo)致很多人無(wú)法運(yùn)行iOS項(xiàng)目Ｋ得簟！丢郊！中文網(wǎng)在論壇中提供了這些庫(kù)的國(guó)內(nèi)下載鏈接像云。如果你嫌麻煩，又沒有對(duì)新版本的需求蚂夕，那么可以暫時(shí)創(chuàng)建0.44.3的版本迅诬。
提示：你可以使用--version參數(shù)（注意是兩個(gè)杠）創(chuàng)建指定版本的項(xiàng)目。例如react-native init MyApp --version 0.44.3婿牍。注意版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)侈贷。
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
你也可以在Nuclide中打開AwesomeProject文件夾 然后運(yùn)行，或是雙擊ios/AwesomeProject.xcodeproj文件然后在Xcode中點(diǎn)擊Run按鈕等脂。
2.開啟RN之旅
根據(jù)歷史悠久的“傳統(tǒng)”俏蛮，我們也來(lái)寫一個(gè)“Hello World”：
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
3.props（屬性）
通過(guò)在不同的場(chǎng)景使用不同的屬性定制，可以盡量提高自定義組件的復(fù)用范疇上遥。只需在render函數(shù)中引用this.props搏屑，然后按需處理即可。下面是一個(gè)例子：
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
4.state(狀態(tài))
我們使用兩種數(shù)據(jù)來(lái)控制一個(gè)組件：props和state粉楚。props是在父組件中指定辣恋，而且一經(jīng)指定，在被指定的組件的生命周期中則不再改變模软。 對(duì)于需要改變的數(shù)據(jù)伟骨，我們需要使用state。
一般來(lái)說(shuō)燃异，需要在constructor中初始化state携狭，然后在需要修改時(shí)調(diào)用setState方法。
假如我們需要制作一段不停閃爍的文字回俐。文字內(nèi)容本身在組件創(chuàng)建時(shí)就已經(jīng)指定好了逛腿，所以文字內(nèi)容應(yīng)該是一個(gè)prop稀并。而文字的顯示或隱藏的狀態(tài)（快速的顯隱切換就產(chǎn)生了閃爍的效果）則是隨著時(shí)間變化的，因此這一狀態(tài)應(yīng)該寫到state中单默。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒對(duì)showText狀態(tài)做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
render() {
// 根據(jù)當(dāng)前showText的值決定是否顯示text內(nèi)容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
