react-native - react 导航: Transparent header has no height

Question

如果我设置headerTransparent: true，通常在其下方呈现的其他内容将在其下方移动。我该如何避免呢？

我的代码:

export class RegisterScreen extends Component {
  static navigationOptions = {
    title: strings.header,
    headerTitleStyle: { color: '#fff' },
    headerTintColor: '#fff',
    headerTransparent: true,
  };
  render() {
    return <Display onSignUpPressed={() => {}} onHelpPressed={() => {}} />;
  }
}

具有透明的标题(它与:()重叠:



没有透明标题:



我想使内容对齐，就好像标题具有高度一样。因此，我希望内容像第二张图片一样，但具有像第一张图片一样的透明 header 。

Answer 1

您将需要给屏幕组件一个顶部填充，该顶部填充等于标题的高度，