react-native - 顶部对齐图像

Question

我正在尝试使用带有背景图像的屏幕，但是如果图像尺寸无法使其全屏显示，我希望将图像固定在顶部。RN 文档似乎说 resizeMode="contain" 应该可以解决问题，但由于某种原因，它仍然像 resizeMode="center" 一样居中图像。有没有办法做到这一点？以下代码不起作用。

<ImageBackground source={defaultImage} style={{ flex: 1 }} resizeMode="contain">

</ImageBackground>

标签： react-nativestyles

Answer 1

如果你想用手机大小填充图像，你可以使用' stretch'。

stretch：独立缩放宽度和高度，这可能会改变纵横比

的源代码。

<ImageBackground source={defaultImage} style={{ flex: 1 }} resizeMode="stretch">

</ImageBackground>

position如果要保持图像比例并将图像保持在顶部，则可以使用道具。

 <ImageBackground
          style={{ flex:1,position:'absolute',width:"100%",height:"100%",bottom:150,justifyContent:"flex-end",alignItems:"center"}}
          source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
          resizeMode = "contain"
        >
        <Text style={{fontSize:30,fontWeight:"bold"}}> ImageBackground</Text>
        </ImageBackground>