反应导航：透明标题没有高度

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={() => {}} />;
  }
}

具有透明标题（与:(重叠）：

没有透明标题：

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

Answer 1

您现在可以使用该headerStyle属性为标题提供透明背景，同时保持其高度：

static navigationOptions = {
    title: strings.header,
    headerTitleStyle: { color: '#fff' },
    headerTintColor: '#fff',
    headerStyle: { backgroundColor: 'transparent' },
  };

Answer 2

像这样将 headerBackground 添​​加到 navigationOptions

static navigationOptions = {
    title: strings.header,
    headerTitleStyle: { color: '#fff' },
    headerTintColor: '#fff',
    headerTransparent: true,
    headerBackground: Platform.select({
        ios: <BlurView style={{ flex: 1 }} intensity={98} />,
        android: (
          <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
    ),
  }),
};