React Native Flex Box Align - PullRequest
Новая
       15

React Native Flex Box Align

0 голосов
/ 15 ноября 2018

Я пытаюсь выровнять изображение внутри компонента ImageBackground, хотя независимо от того, что я делаю, оно не соответствует правилам flexbox.

Ниже приведен желаемый результат

enter image description here

Но сейчас я получаю

enter image description here

Ниже приведен код, который я использовал 

render () {
console.log(this.props.data.attributes.main_image_url)
return (
  <TouchableOpacity onPress={this._handlePress} style={styles.container}>
    <ImageBackground source={{uri: "https:"+this.props.data.attributes.main_image_url}} style={styles.background}>
      <View style={styles.logoContainer}>
        <Image
          // defaultSource={require('../Images/logo-placeholder.png')}
          source={{uri: "https:"+this.props.data.attributes.logo_url}}
          resizeMode="contain"
          style={styles.logo}
        />
      </View>
    </ImageBackground>
  </TouchableOpacity>
)

}

Стили 

    container: {
    marginBottom: Metrics.doubleSection,
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'stretch',
  },
  background: {
    height: Metrics.screenWidth / 2,
    width: Metrics.screenWidth-(Metrics.baseMargin*2),
    margin: Metrics.baseMargin
  },
  logoContainer: {
    backgroundColor: Colors.coal,
    justifyContent: 'flex-end',
    alignItems: 'left',
    left: Metrics.doubleBaseMargin,
    height: Metrics.images.xl,
    width: Metrics.images.xl
  },
  logo: {
    height: Metrics.images.xl,
    width: Metrics.images.xl
  }

1 Ответ

0 голосов
/ 15 ноября 2018

Измените свой стиль logoContainer, как указано ниже position:'absolute' and set bottom:negative value: 

logoContainer: {
    backgroundColor: Colors.coal,
    justifyContent: 'flex-end',
    alignItems: 'flex-start',
    position:'absolute', // set position to absolute 
    bottom:-10, //give relative value here
    left: Metrics.doubleBaseMargin,
    height: Metrics.images.xl,
    width: Metrics.images.xl
  },
...