ReactNative导航的右边添加按钮做跳转

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);
···