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

有透明头部（它重叠了 :( ）：

没有透明头部:

我希望内容的对齐方式就好像头部有高度一样。所以，我希望内容像第二张图片那样，但是头部会像第一张图片那样透明。

- J. Hesters

---

在代码中添加<View style={styles.statusBar} />，其中样式可以是: statusBar: { backgroundColor: "#C2185B", width: "100%", height: Constants.statusBarHeight } - ashishdhiman2007

试试这个：https://github.com/react-navigation/react-navigation/issues/855#issuecomment-301671395 - Zaytri

尝试添加headerBackground。 - Medet Tleukabiluly

Answer 1

现在您可以使用 headerStyle 属性为标题栏设置透明背景，同时保持其高度不变：

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

- omerts

---

我已经尝试了这里提到的其他选项，但只有这个可以在不费力的情况下工作。 - Wylie

Answer 2

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

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

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

const headerHeight = useHeaderHeight();

- Khim Bahadur Gurung

Answer 3

在 React Native v6.x 上

不要再使用

screenOptions={{headerTransparent: true}}

你可以像这样在头部样式中的backgroundColor中应用它

screenOptions={{
    headerStyle: {
        backgroundColor: 'transparent';
    }
}}

如果您想保留填充，则可以这样做

- JulianErnest

Answer 4

有点混乱，但你需要这个要点 https://reactnavigation.org/docs/native-stack-navigator/#headersearchbaroptions

你需要在页面中添加ScrollView或Flatlist参数： contentInsetAdjustmentBehavior="automatic"。即使你不使用searchBar。

headerSearchBarOptions 在iOS上渲染原生搜索栏的选项。搜索栏通常不是静态的，所以通常通过将一个对象传递给组件的headerSearchBarOptions导航选项来控制。你还需要在ScrollView、FlatList等中指定contentInsetAdjustmentBehavior="automatic"。如果你没有ScrollView，请指定headerTransparent: false。

- Dinexpod

Answer 5

您需要给屏幕组件添加顶部填充，填充高度应该等于页眉的高度。

- Jimmy Obonyo Abor

Answer 6

我们可以通过以下方式创建透明的标题：

headerTransparent: true

但是为了使标题透明，我们还需要提供类似下面的 headerStyle：

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

在我的情况下，我通过将这个样式应用到我的头部来实现它。

style:{ position: 'absolute', backgroundColor: 'transparent', zIndex: 100, top: 0, left: 0, right: 0}

- Jatin parmar

Answer 7

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

- Aleksey Shulga

---

这似乎只是一个权宜之计，特别是因为您仍然以98的强度呈现某些内容。 - J. Hesters

@J.Hesters，根据React Navigation文档，当您使用headerTransparent: true时，必须提供headerStyle或headerBackground。请查看此链接 - https://reactnavigation.org/docs/en/stack-navigator.html#headertransparent - Dinith Minura