1.3 React Navigation 中文文档 – 03-配置标题
标题仅适用于StackNavigator。
在前面的例子中,我们创建了一个StackNavigator来在我们的应用程序中显示几个屏幕。
导航到聊天屏幕时,可以通过将其提供给导航功能来指定新路由的参数。在这种情况下,我们要在聊天屏幕上提供该人的姓名:
this.props.navigation.navigate('Chat', { user: 'Lucy' });
该PARAM可以在聊天屏幕访问:user
class ChatScreen extends React.Component {
render() {
const { params } = this.props.navigation.state;
return <Text>Chat with {params.user}</Text>;
}
}
设置标题标题
接下来,标题可以配置为使用屏幕参数:
class ChatScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
...
}


添加右键
然后我们可以添加一个导航选项,允许我们添加一个自定义的右键:header
static navigationOptions = {
headerRight: <Button title="Info" />,
...


导航选项可以使用导航支柱定义。让我们根据路径参数渲染一个不同的按钮,并按下按钮来调用。navigation.setParams
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'})}
/>
),
};
};
现在,标题可以与屏幕路线/状态进行交互:


要查看其余的标题选项,请参阅导航选项文档。