反应原生Flex Box对齐

Question

尽管我做任何事情，我都试图将图像与ImageBackground组件内对齐，但它似乎没有遵循flexbox规则。

下面是期望的结果

但是我现在正在得到

下面是我使用的代码

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
  }

Answer 1

更改您的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
  },