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

Posted 2021-04-20

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

我收到的模拟有一个屏幕，它被分成两半（横向模式），有两个不同的标题。有可能通过反应导航来实现这一目标吗？

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

答案

就像你在source of Header中看到的那样，如果header选项为null，它就不会呈现：

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

因此手动使用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>
    );
  }
}

当然有合适的造型:)