React Native Flex 框对齐

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
  },