是否可以使用React Navigation在一个屏幕上呈现两个 Headers ？-Java 学习之路

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

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

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

1 回答

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

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

因此手动使用 Header 组件将无法正常工作 .

您可以创建自己的 Headers 组件， Headers 和“后”可触摸 . 如果设计师给你一个模拟，我认为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>
    );
  }
}

当然有合适的造型:)

回复于 2024-04-20T05:47:22+08:00

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

1 回答

相关问题