由來：
Facebook 在2015年初React.js技術(shù)研討大會(huì)上公布的一個(gè)開源項(xiàng)目。支持用開源的JavaScript庫React.js來開發(fā)iOS和Android原生App。初期僅支持iOS平臺(tái)，同年9月份，該開源項(xiàng)目同時(shí)支持Android平臺(tái)。
原理：
在JavaScript中用React抽象操作系統(tǒng)原生的UI組件，代替DOM元素來渲染，比如以<View>取代<div>，以<Image>替代<im g>等。
優(yōu)點(diǎn)：
能夠用JavaScript腳本就可以寫出App的界面，從前端角度而言，React Native跨平臺(tái)特性，不要開發(fā)者深入的了解各平臺(tái)就能開發(fā)一款高效App。
組件化：
Props(當(dāng)前組件只讀):
State(當(dāng)前組件私有)：
當(dāng) state 更新之后，組件就會(huì)重新渲染自己。
render() 方法依賴于 this.props 和 this.state ，框架會(huì)確保渲染出來的 UI 界面總是與輸入（ this.props 和 this.state ）保持一致。
組件生命周期
1.Mounting：已插入真實(shí) DOM
2.Updating：正在被重新渲染
3.Unmounting：已移出真實(shí) DOM
Mounting(裝載):
getInitialState(): 在組件掛載之前調(diào)用一次。返回值將會(huì)作為 this.state 的初始值。
componentWillMount()：服務(wù)器端和客戶端都只調(diào)用一次，在初始化渲染執(zhí)行之前立刻調(diào)用。
componentDidMount()：在初始化渲染執(zhí)行之后立刻調(diào)用一次，僅客戶端有效（服務(wù)器端不會(huì)調(diào)用）。
Updating (更新)：
componentWillReceiveProps(object nextProps)： 在組件接收到新的 props 的時(shí)候調(diào)用。在初始化渲染的時(shí)候，該方法不會(huì)調(diào)用。用此函數(shù)可以作為 react 在 prop 傳入之后， render() 渲染之前更新 state 的機(jī)會(huì)。老的 props 可以通過 this.props 獲取到。
shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state，將要渲染之前調(diào)用。該方法在初始化渲染的時(shí)候不會(huì)調(diào)用。如果確定新的 props 和 state 不會(huì)導(dǎo)致組件更新，則此處應(yīng)該 返回 false。(PS:重寫此方法可以根據(jù)實(shí)際情況，來靈活的控制組件當(dāng) props 和 state 發(fā)生變化時(shí)是否要重新渲染組件。)
componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 之后，render() 渲染之前立刻調(diào)用。在初始化渲染的時(shí)候該方法不會(huì)被調(diào)用。使用該方法做一些更新之前的準(zhǔn)備工作。
注意：你不能在該方法中使用 this.setState()。如果需要更新 state 來響應(yīng)某個(gè) prop 的改變，請(qǐng)使用 componentWillReceiveProps。
componentDidUpdate(object prevProps, object prevState): 在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用。該方法不會(huì)在初始化渲染的時(shí)候調(diào)用。使用該方法可以在組件更新之后操作 DOM 元素。
Unmounting(移除):
componentWillUnmount：在組件從 DOM 中移除的時(shí)候立刻被調(diào)用。在該方法中執(zhí)行任何必要的清理，比如無效的定時(shí)器，或者清除在 componentDidMount 中創(chuàng)建的 DOM 元素。
圖片引用
<Image source={require('./my-icon.png')} />
如果你有my-icon.ios.png和my-icon.android.png，Packager就會(huì)根據(jù)平臺(tái)而選擇不同的文件。
你還可以使用@2x，@3x這樣的文件名后綴，來為不同的屏幕精度提供圖片。比如下面這樣的代碼結(jié)構(gòu)：
.
├── button.js
└── img
├── check@2x.png
└── check@3x.png
靜態(tài)圖片資源
<Image source={require('./img/check.png')} />
Packager會(huì)打包所有的圖片并且依據(jù)屏幕精度提供對(duì)應(yīng)的資源。譬如說，iPhone 5s會(huì)使用check@2x.png，而Nexus 5上則會(huì)使用check@3x.png。如果沒有圖片恰好滿足屏幕分辨率，則會(huì)自動(dòng)選中最接近的一個(gè)圖片。
網(wǎng)絡(luò)圖片
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{width: 400, height: 400}} />
混合App的圖片資源
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
注意：這一做法并沒有任何安全檢查。你需要自己確保圖片在應(yīng)用中確實(shí)存在，而且還需要指定尺寸。
通過嵌套來實(shí)現(xiàn)背景圖片
return (
<Image source={...}>
<Text>Inside</Text>
</Image>
);
導(dǎo)航 React Navigation
import MainScreenfrom './src/MainScreen';
import ProfileScreenfrom './src/ProfileScreen';
import {
StackNavigator,
} from 'react-navigation';
const App = StackNavigator({
Main: {screen: MainScreen},
Profile: {screen: ProfileScreen},
});
class MainScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'Jane' });
}
/>
);
}
}
觸摸事件
render() {
return (
<TouchableHighlight onPress={this._onPressButton}> // onLongPress
<Text>Button</Text>
</TouchableHighlight>
);
}
原生按鈕：
一般來說，你可以使用TouchableHighlight來制作按鈕或者鏈接。注意此組件的背景會(huì)在用戶手指按下時(shí)變暗。
在Android上還可以使用TouchableNativeFeedback，它會(huì)在用戶手指按下時(shí)形成類似墨水漣漪的視覺效果。
TouchableOpacity會(huì)在用戶手指按下時(shí)降低按鈕的透明度，而不會(huì)改變背景的顏色。
如果你想在處理點(diǎn)擊事件的同時(shí)不顯示任何視覺反饋，則需要使用TouchableWithoutFeedback。
PanResponder
this.panResponder = PanResponder.create(
{
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState)=> true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState)=>{
this.setState({
initY: gestureState.y0
});
},
onPanResponderMove: (evt, gestureState)=>{},
onPanResponderRelease: (evt, gestureState)=>{
slideEvent(gestureState.moveY);
}
}
)
