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'})}
      />
    ),
  };
};

现在，标题可以与屏幕路线/状态进行交互：

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