ReactNative 棧導(dǎo)航（StackNavigator）：
第一步引入import {StackNavigator} from 'react-navigation';
第二步：創(chuàng)建組件設(shè)置navigationOptions
第三步：StackNavigator 配置屏幕
（1.需要做跳轉(zhuǎn)的其他組件時(shí)需要通過(guò)props獲取navigate ,
const {navigate}=this.props.navigation,然后在跳轉(zhuǎn)事件里面調(diào)用navigator('傳入要跳轉(zhuǎn)屏幕對(duì)應(yīng)的key')
2.如果在navigationOptions里面做跳轉(zhuǎn)則需要吧{navigation}傳進(jìn)去，然后代用navigation.navigate('傳入要跳轉(zhuǎn)屏幕對(duì)應(yīng)的key'),如下：
在導(dǎo)航的右邊添加headerRight 重點(diǎn)是把navigation傳進(jìn)去，比如

static navigationOptions=({navigation})=>({

title:'Title',

headerRight:<Button title='right' onPress={()=>navigation.navigate('這里是指向的組件key')}/>

});
3.需要傳參數(shù)的時(shí)候在navigate(參數(shù)一是路由名字，參數(shù)二dict傳值)
navigate('Chat',{user:'abc'})
取參數(shù)的時(shí)候 需要 const {params} = this.props.navigation.state.
比如：const {params} = this.props.navigation.state;
return <Text>Chat with{params.user}</Text>
如果是在navigationOptions取參數(shù)
比如 static navigationOptions =({navigation})=>({
title:${navigation.state.params.user},
}
)
//）。
···
/**

• Sample React Native App
• https://github.com/facebook/react-native
• @flow
  */

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Dimensions,
TextInput,
ScrollView,
FlatList,
SectionList,
Button
} from 'react-native';

import {StackNavigator} from 'react-navigation';

class HomeScreen extends Component{
static navigationOptions =({navigation})=>({
title:'Main',
headerRight:<Button title="Right" onPress={()=>navigation.navigate('Sec',{user:'Lucy'})}/>,
}) ;
render(){
const {navigate} = this.props.navigation;
return(
<View>
<Text>this is Main</Text>
<Button title="Second" onPress={()=>navigate('Sec',{user:'Lucy'})}/>
</View>
);
}

}
class Second extends Component{
static navigationOptions =({navigation})=>( {
title:Chat with ${navigation.state.params.user},
});
render(){
const {params} = this.props.navigation.state;
return(
<Text>chat with {params.user}</Text>
);
}
}
const App = StackNavigator({
Home:{screen:HomeScreen},
Sec:{screen:Second}
});

var screenWidth =Dimensions.get('window').width;
const styles = StyleSheet.create({

container:{
    flex:1,
    marginTop:20,

},
text:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    textAlign:'center',
    backgroundColor:'red',
},

});

AppRegistry.registerComponent('AwesomeProject', () => App);
···