Как поместить ImageBackground с resizeMode, установленным в «содержать» вверху? - PullRequest
Новая
       21

Как поместить ImageBackground с resizeMode, установленным в «содержать» вверху?

0 голосов
/ 08 марта 2019

В настоящее время я отображаю фоновое изображение в своем приложении React Native, используя следующий код: 

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

Я не хочу, чтобы мое изображение растягивалось, а resizeMode: 'contain' отлично справляется с этой работой. Таким образом, изображение не охватит весь мой экран, а только его часть, и это именно то, чего я хочу достичь.

Моя проблема в том, что изображение выровнено по центру по вертикали с кодом, который я показал выше, в то время как я хотел бы, чтобы оно висело вверху. Так что надо держать пропорции и придерживаться сверху. Я пытался использовать position:'absolute' и top:0 в свойстве imageStyle, но оно не работает.

Я видел этот вопрос , который, очевидно, объясняет мою проблему, но не дает решения моей проблемы.

Есть ли у вас какие-либо предложения?

Ответы [ 2 ]

1 голос
/ 08 марта 2019

попробуйте это: 

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

0 голосов
/ 08 марта 2019

Эй, я не совсем понимаю, что именно вам нужно сделать, попробуйте это 

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(background.jpg) no-repeat;
  /* background-size: cover; */
}
...