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

【问题标题】：React Navigation: Transparent header has no height反应导航：透明标题没有高度
【发布时间】：2019-10-13 23:30:09
【问题描述】：

如果我设置headerTransparent: true，通常在其下方呈现的其他内容将移动到其下方。我怎样才能避免这种情况？

我的代码：

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

带有透明标题（它重叠：（）：

没有透明标题：

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

【问题讨论】：

添加一个样式可以是：statusBar: { backgroundColor: "#C2185B", width: "100%", height: Constants.statusBarHeight }
试试这个：github.com/react-navigation/react-navigation/issues/…
尝试添加headerBackground

标签： react-native react-navigation react-navigation-stack

【解决方案1】：

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

【讨论】：

这似乎只是一种解决方法，尤其是因为您仍然以 98 的强度渲染某些东西
@J.Hesters，根据反应导航文档，当您使用 headerTransparent：true 时，您必须提供 headerStyle 或 headerBackground。检查这个 - reactnavigation.org/docs/en/…

【解决方案2】：

我们可以在

的帮助下制作透明标题

headerTransparent：真

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

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

在我的情况下，我通过将这种样式赋予我的标题来实现它。

style:{ position: 'absolute', backgroundColor: 'transparent', zIndex: 100，上：0，左：0，右：0}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

const headerHeight = useHeaderHeight();

【讨论】：

【解决方案5】：

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

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

【讨论】：