react-native - React Navigation：透明标题没有高度

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: true如果设置，标题与下面的内容重叠。如果您不希望内容重叠，则需要根据您的情况手动为内容添加上边距或填充。React Navigation 不会自动执行此操作，但它提供了一个获取标题高度的钩子

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

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

const headerHeight = useHeaderHeight();

Answer 2

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

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

Answer 3

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

Answer 4

我们可以借助以下工具制作透明标题

标头透明：真

但是有了这个，我们还需要像这样给 headerStyle 来制作透明的标题。

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

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

样式：{位置：'绝对'，背景颜色：'透明'，zIndex：100，顶部：0，左：0，右：0}

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)' }} />
    ),
  }),
};