反应本机 ImageBackground 不使用全宽答案

【问题标题】：react native ImageBackground not using full width反应本机 ImageBackground 不使用全宽
【发布时间】：2023-02-02 13:52:38
【问题描述】：

我有一个屏幕：

return (

    <SafeAreaView style={styles.container}>
        <ImageBackground source={require('../../../../assets/start.png')} resizeMode="cover" style={styles.image}>
            <Text>Some Text</Text>
        </ImageBackground>
    </SafeAreaView>
);

这些是我正在使用的样式：

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: 'white',
  },
  image: {
    flex: 1,
    justifyContent: 'center',
  },

})

问题是我的背景图像周围有空白。

从上图中可以看出，图像的顶部和左侧有一个间隙，底部和右侧也有相同的间隙。

我试图让这个图像边到边。任何的想法？

iv 尝试添加 100% 宽度和高度并对图像应用调整大小属性，但它不起作用？

【问题讨论】：

图像本身没有白边，但它是用白边渲染的，对吗？你检查过browser devtools to see what causes the artifact了吗？ <SafeAreaView />的父元素也是flex容器吗？如果是这样，flex: 1 可能会使其扩展到整个父级宽度。
是的，图像没有边缘，但它用白色边缘渲染。添加 flex 1 或删除它，对修复没有帮助:(
没有看到完整的 JSX 标记就很难分辨。想知道白边是出现在<SafeAreaView /> 和<ImageBackground /> 之间，还是出现在<SafeAreaView /> 和它的父项之间。

标签： javascript css reactjs react-native

【解决方案1】：

这是您的代码的摘要，您会看到它可以正常工作。没有问题： https://snack.expo.dev/?platform=android

【讨论】：