时间戳

首页 > 解决方案 > 是否可以使用 React Navigation 在一个屏幕上呈现两个标题？

react-native - 是否可以使用 React Navigation 在一个屏幕上呈现两个标题？

问题描述

我正在使用 React Native 编写一个 iPad / Android 平板电脑应用程序，并且我正在使用 React Navigation 进行导航。

我收到的模型有一个屏幕，它分成两半（在横向模式下），有两个不同的标题。是否可以通过反应导航来实现这一点？

我尝试的是header: null在屏幕的导航选项中进行设置，然后在该分屏上渲染两个组件，每个组件都将 React Navigation 的Header组件作为第一个子组件。这在某种程度上不起作用（标题没有被渲染）。

标签： react-nativeheaderreact-navigation

解决方案

就像您在源代码中Header看到的那样，如果 header 选项为空，则不会呈现：

_renderHeader(props) {
  const { options } = props.scene.descriptor;
    if (options.header === null) {
      return null;
    }
    ...
}

所以Header手动使用组件是行不通的。

您可以创建自己的带有标题和“后退”可触摸的 Header 组件。如果设计师给了你一个模型，我认为 Header 的样式必须与原始 Header 组件的样式非常不同:)

您的组件可能如下所示：

export default class MyCustomHeader extends Component {
  handlePress = () => {
    const { navigation } = this.props;
    navigation.goBack(); // or .navigate() to whatever you want
  };

  render() {
    return (
      <View>
        <TouchableHighlight onPress={this.handlePress}>
          <some-icon>
        </TouchableHighlight>
        <Text>My title</Text>
      </View>
    );
  }
}

当然有适当的造型:)

推荐阅读