React Native - 背景图像没有占据窗口的全部高度答案

【问题标题】：React Native - Background Image does not take full height of windowReact Native - 背景图像没有占据窗口的全部高度
【发布时间】：2022-01-10 16:58:24
【问题描述】：

我正在尝试制作一个简单的 Tesla App 克隆，因为我刚刚开始使用 React Native，我被卡了一段时间。问题是，我无法将背景图片设置为设备屏幕/窗口的全高。

一些参考图片：

下面是我一直在尝试的代码：

我的CarsList 组件，它呈现您可以看到的项目列表。

const CarsList = () => {
    return (
        <View style={styles.container}>
            <FlatList
              data={cars}
              snapToAlignment={'start'}
              decelerationRate={'normal'}
              snapToInterval={Dimensions.get("window").height}
              showsVerticalScrollIndicator={false}
              renderItem={
                  ({ item }) => 
                  <CarItem
                    carTitle={item.carTitle}
                    carSubTitle={item.carSubTitle}
                    carImage={item.carImage}
                    tagLine={item.tagLine}
                  />
                }
            />
        </View>
    )
}

CarsList 的样式表：

const styles = StyleSheet.create({
    container: {
        width: "100%",
    }
});

然后是单CarItem。

const CarItem = ({ carTitle, carSubTitle, carImage, tagLine }) => {
    return (
        <View style={styles.carContainer}>
            <ImageBackground 
            source={carImage} 
            style={styles.backgroundImage}
            />

            <View style={styles.carTitlesContainer}>
                <Text style={styles.title}>{carTitle}</Text>
                <Text style={styles.subtitle}>{carSubTitle} {tagLine}</Text>
            </View>

            <View style={styles.buttonsContainer}>
                <StyledButton
                 type="primary" 
                 content="CUSTOM ORDER" 
                />
                <StyledButton
                 type="secondary" 
                 content="EXISTING INVENTORY" 
                />
            </View>
        </View>
    )
}

CarItem 的样式表，我认为问题出在哪里。

const styles = StyleSheet.create({
    carContainer: {
        width: "100%",
        height: Dimensions.get("window").height,
      },
      backgroundImage: {
        width: "100%",
        height: "100%",
        resizeMode: 'cover',
        position: "absolute",
      },
      buttonsContainer: {
        position: "absolute",
        bottom: 40,
        width: "100%",
      },
})

有人可以告诉我如何解决这个问题，这背后的原因是什么？谢谢！

【问题讨论】：

将minheight:Dimensions.get("window").height 分配给您的容器样式。
@Alen.Toma 没用。

标签： css reactjs react-native

【解决方案1】：

尝试使用 ;

此外，如果您想使用 ImageBackground，请确保将其他组件作为子组件传递给它。

【讨论】：

感谢您的回答，但很遗憾，它不起作用。
耶！所以，我认为 {height: Dimensions.get("window").height}; 有问题尝试评论您的一些高度和宽度样式，并在可能的情况下再次测试；
@是的，我一直在尝试相同的方法，但无法正常工作！

【解决方案2】：

试试Dimensions.get('screen').height;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。