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

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

我们可以在

的帮助下制作透明标题

  

headerTransparent：是

但是与此同时，我们还需要赋予headerStyle这样的标题，以使其透明。

static navigationOptions = {
headerTransparent: true,
headerStyle: { borderBottomWidth: 0 }
};

就我而言，我可以通过将这种样式赋予标题来实现。

  

style：{位置：“绝对”，backgroundColor：“透明”，zIndex：   100，顶部：0，左侧：0，右侧：0}

Answer 2

您需要为屏幕组件提供与标题高度相同的顶部填充

Answer 3

如果设置了headerTransparent: true，则标题与下面的内容重叠。如果您不希望重叠，则需要根据您的情况向内容手动添加上边距或填充。 React Navigation不会自动执行它，但是它提供了一个获取标题高度的钩子

import { useHeaderHeight } from '@react-navigation/stack';

现在，您可以像这样获取组件中的高度：

const headerHeight = useHeaderHeight();

Answer 4

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

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

Answer 5

像这样将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)' }} />
    ),
  }),
};