如何使用 react-navigation 在 react-native 中使用导航栏设置背景图像

Question

我必须在output下面实现：

我取得的成就

这是我的源代码：

 return (
        <ImageBackground source={require('../../assets/images/home_bg.png')} style={{
            height: 185,
            width: '100%',

        }}>
            <Header style={{
                backgroundColor: 'transparent'
            }}
                androidStatusBarColor={"#EB7D16"} >
                <View style={{ flex: 0.5, alignItems: 'center', alignContent: 'center', alignSelf: 'center' }}>
                    <Left>{LeftIcon}</Left>
                </View>
                <View style={{ flex: 4, justifyContent: 'center', alignItems: 'center' }}>
                    <CustomSearchBar />
                </View>
                <View style={{ flex: 0.5, alignContent: 'center', alignItems: 'center' }}>
                    <Right>{RightIcon}</Right>
                </View>
            </Header>
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                <Image resizeMode="contain" source={require('../../assets/icons/logo.png')} style={{ height: '50%', width: '50%', marginTop: 20 }}>
                </Image>
            </View>
        </ImageBackground >
    );

我使用了图像背景，然后在该模块上设置 Header 组件。

在这里，我设置了 ImageBackground 高度：185，宽度：'100%'，这是错误的方式，它对所有设备都没有响应。 我也使用 windows.height 和 windows.width 但它也不起作用，请分享设置此背景图像的正确方法以及如何实现可能针对 Z78E6221F6393D1356681DB398F14CE6

先感谢您！

Answer 1

您需要使状态栏“半透明”，以便背景图像从顶部开始。

试试这个并添加你的主屏幕渲染

import { StatusBar } from "react-native";

 ...

<StatusBar translucent backgroundColor="transparent" />

Answer 2

我通过我的 slef 解决了它。实际上是背景图像的问题。

谢谢大家的时间！