Как настроить Image на полноразмерный экран с заголовком в реагирующей навигации?

Question

У меня есть экран с изображением, и я хочу взять полноразмерный экран с заголовком?

Я просто использую position: "absolute", но он не работает, чтобы обернуть заголовок, и я не могу использовать header: null потому что я хочу, чтобы появилась кнопка «Назад»!

так, как я могу справиться с этим?

что я получаю

что я хочу

Заранее спасибо.

Answer 1

Вы можете сделать заголовок прозрачным для определенного экрана, добавив свойство headertransparent

Попробуйте это

 static navigationOptions = {
    headerTransparent: true,
  };

Complete Sampleкод

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

используйте этот стиль в заголовке {position: 'absolute', zIndex: 100, top: 0, left: 0, right: 0, height: 0, shadowOpacity: 0, borderBottomWidth: 0}