如何将图像背景与调整大小模式设置为"contain"在顶部？

Question

我当前使用以下代码在我的反应本机应用程序上显示背景图像：

<ImageBackground 
   source={myImage} 
   style={{ width:'100%', height:'100%' }} 
   imageStyle={{resizeMode: 'contain'}}
>
....
</ImageBackground>

我不希望我的图像伸展，而resizeMode: 'contain'可以很好地完成这项工作。这样，图像不会覆盖我的所有屏幕，而只涵盖其中的一部分，这正是我想要实现的。

我的问题是，图像在中心与上面显示的代码对齐，而我希望它粘在顶部。因此，它应该保持比例并粘在顶部。我尝试在Imagestyle属性中使用position:'absolute'和top:0，但它不起作用。

我看到了这个问题，显然解释了我的问题，但没有为我的问题提供解决方案。

您有什么建议吗？

Answer 1

尝试以下：

import {Dimensions} from 'react-native'
    constructor(props) {
      super(props);
      this.state = { height: 0 };
    }
    componentDidMount(){
          Image.getSize(imgUrl, (srcWidth, srcHeight) => {
             const maxHeight = Dimensions.get('window').height; 
             const maxWidth = Dimensions.get('window').width;
             const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
             this.setState({ height: srcHeight * ratio})
          })
    } 
    <ImageBackground 
       source={myImage} 
       style={{ flex:1 }} 
       resizeMode= 'contain'
       imageStyle={height: this.state.height, width:Dimensions.get('window').width}
    >
    ....
    </ImageBackground>

ImageBackground与 Image相同的道具，因此 resizeMode是一种道具而不是样式
请参阅以下内容：https：//facebook.github.io/react-native/docs/imagebackground

Answer 2

我使用静态高度和RESIZEMODE COVER

实现了类似的效果

<ImageBackground 
  style={{ flex: 1 }}
  imageStyle={{ height: 300 }}
  source={{ uri: entity.picture }}
  resizeMode="cover"
>
  ...
</ImageBackground>

Answer 3

只需使用图像组件即可。并将样式设置为宽度：'100％';