代码之家 › 专栏 › 技术社区 › Boss Nass

React本机Flex Box Align

alignment flexbox react-native

Boss Nass · 技术社区 · 6 年前

我正在尝试在和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
  }

2 回复 | 直到 6 年前

Rutvik Bhatt 6 年前

换衣服 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
  },

推荐文章

Riddhi · 在ionic中对齐按钮

6 年前

Joshua Sparkel · 排列的元素相差几个像素

6 年前

ProtectedVoid · CSS宽度自动和向左浮动-允许溢出

6 年前

Josh Rodgers · 居中网格项目

6 年前

Jean Jacquemier · Apache箭头、对齐和填充

6 年前

Zubair · 与UILabel绘图/显示在屏幕上相关的方法

6 年前

user7055375 · 除了“文本对齐:居中把东西放在一个DIV里?

6 年前

KevinM · 在导航栏引导程序4中将图标与文本对齐

6 年前

KhiladiBhaiyya · 如何将引导程序导航栏最左边的项移到更远的左边

6 年前

Sujal · UIAlertController中的居中对齐图像操作

6 年前