如何在 React 导航中设置图像以 header 显示全尺寸屏幕？

Question

我的屏幕包含图像，我想用 header 拍摄 full-size 屏幕？

我只使用了 position: "absolute"，但包裹 header 不起作用，而且我不能使用 header: null，因为我希望后退按钮出现！

那我该如何处理呢？

我得到了什么

我想要的

提前致谢。

Answer 1

您可以通过添加属性 headertransparent

使 header 对特定屏幕透明

试试这个

 static navigationOptions = {
    headerTransparent: true,
  };

完整示例代码

import React from "react";
import { View, Dimensions, Image } from "react-native";
import { createAppContainer, createStackNavigator } from "react-navigation";
import { Text } from "react-native";

const { width } = Dimensions.get("window");

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: "Home"
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text
          style={{ padding: 20 }}
          onPress={() => this.props.navigation.navigate("Detail")}
        >
          Send To Detail
        </Text>
      </View>
    );
  }
}

class DetailScreen extends React.Component {
  static navigationOptions = {
    headerTransparent: true,
    headerTintColor: "#fff"
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Image
          style={{ width: width, height: 400 }}
          source={{
            uri:
              "https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=2048x2048",
            cache: "force-cache"
          }}
        />
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  Detail: {
    screen: DetailScreen
  }
});

export default createAppContainer(AppNavigator);

应用演示

Answer 2

在 header 中使用此样式 { 位置：'absolute'， z索引：100，顶部：0，左：0，右：0，海拔：0，阴影不透明度：0，边框底部宽度：0 }

Answer 3

你需要隐藏 header，如果你使用的是 React 导航，你可以添加 navigationOptions 来添加隐藏 header 的属性，比如这些行。

static navigationOptions = {
    headerShown: false
  };

如何在 React 导航中设置图像以 header 显示全尺寸屏幕？

How to set Image to take the full size screen with header in react navigation?

javascript

reactjs

react-native

react-native-ios

react-navigation