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

Posted 2023-02-16

【中文标题】React Native - 背景图像没有占据窗口的全部高度

【英文标题】：React Native - Background Image does not take full height of window

【发布时间】：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 没用。

【参考方案1】：

尝试使用 ;

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

【讨论】：

感谢您的回答，但很遗憾，它不起作用。

耶！所以，我认为 height: Dimensions.get("window").height; 有问题尝试评论您的一些高度和宽度样式，并在可能的情况下再次测试；

@是的，我一直在尝试相同的方法，但无法正常工作！

【参考方案2】：

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

【讨论】：

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