> 头部只只适用于StackNavigator组件。
**1.传值**
在前面例子中,我们创建了类似聊天 app的一个StackNavigator。切换卡左侧是好友列表,右侧是最近聊天。
现在我们点击一个好友,出现聊天界面,并且聊天界面中有从列表中传递过来的参数。
如下的方式可以实现:
`this.props.navigation.navigate('Chat', { user: 'Lucy' });`
我们知道 通过props给父组件设置一个值,子组件就可以接收到值。
~~~
class ChatScreen extends React.Component {
render() {
const { params } = this.props.navigation.state;
return <Text>Chat with {params.user}</Text>;
}
}
~~~
OK!!这样就完成了传值。
* * * * *
**2.设置头部标题**
设置屏幕头部参数。
~~~
class ChatScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
}
~~~
* * * * *
**3.为头部右侧添加一个按钮,比如返回,详情等**
然后,我们可以添加一个标题导航选项,让我们可以添加自定义的右按钮。
~~~
static navigationOptions = ({ navigation }) => {
const {state, setParams} = navigation;
const isInfo = state.params.mode === 'info';
const {user} = state.params;
return {
title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
headerRight: (
<Button
title={isInfo ? 'Done' : `${user}'s info`}
onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
/>
),
};
};
~~~