1.3 React Navigation 中文文档 – 03-配置标题

作者: cayman 分类: React Navigation 发布时间: 2017-06-13 16:30

标题仅适用于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'})}
      />
    ),
  };
};

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

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

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注