ReactNative 栈导航（StackNavigator）：
第一步引入import {StackNavigator} from 'react-navigation';
第二步：创建组件设置navigationOptions
第三步：StackNavigator 配置屏幕
（1.需要做跳转的其他组件时需要通过props获取navigate ,
const {navigate}=this.props.navigation,然后在跳转事件里面调用navigator('传入要跳转屏幕对应的key')
2.如果在navigationOptions里面做跳转则需要吧{navigation}传进去，然后代用navigation.navigate('传入要跳转屏幕对应的key'),如下：
在导航的右边添加headerRight 重点是把navigation传进去，比如
static navigationOptions=({navigation})=>({
title:'Title',
headerRight:<Button title='right' onPress={()=>navigation.navigate('这里是指向的组件key')}/>
});
3.需要传参数的时候在navigate(参数一是路由名字，参数二dict传值)
navigate('Chat',{user:'abc'})
取参数的时候 需要 const {params} = this.props.navigation.state.
比如：const {params} = this.props.navigation.state;
return <Text>Chat with{params.user}</Text>
如果是在navigationOptions取参数
比如 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);
···
