如何将视图与顶部和底部以及左右对齐？答案

【问题标题】：How to align views with top and bottom and left and right?如何将视图与顶部和底部以及左右对齐？
【发布时间】：2019-07-06 22:34:56
【问题描述】：

我正在尝试创建 ui 设计，这是我当前的设计：

在此，我有两个矩形的视图，这是我的代码：

  <View style={{ flexDirection: 'column', alignContent: 'space-between' }}>
                <View style={{ flexDirection: 'row' }}>
                    <View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
                    <View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
                </View>
            </View>

预期的输出是第一个矩形应该在左上角（下图看起来是正确的），第二个矩形应该在右下角。但它放置在第一个矩形旁边。

如何移动，矩形到右下角？我尝试了所有方法，例如 justify content ，使用 flex end 但没有任何改变。请帮忙

【问题讨论】：

你试过bottom: 0吗？
是的，没有任何变化，因为第二个矩形本身就在那里！

标签： react-native user-interface layout flexbox

【解决方案1】：

使用Dimensions 会为您解决问题。修改你的代码如下

    import React, { Component } from 'react';
import { AppRegistry, View , Dimensions} from 'react-native';
const width = Dimensions.get('window').width

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{ flex:1,flexDirection: 'column', alignContent: 'space-between' }}>
                <View style={{ flex: 1,flexDirection: 'row' }}>
                    <View style={{ width: width/2, height: 100, backgroundColor: 'red'}}/>
                </View>
                <View style={{flexDirection: 'row' , justifyContent: 'flex-end'}}>
                    <View style={{ width: width/2 ,  height:100 ,backgroundColor: 'red'}}/>
                </View>
            </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

输出：

【讨论】：

如何把第二个矩形放到屏幕右下角？
@Arvindh 请立即查看！

【解决方案2】：

    <View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
      <View style={{ flexDirection: 'row' }}>
          <View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
      </View>
      <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
          <View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
      </View>
    </View>

首先你必须设置flex: 1，这样它才能增长。第二步是添加justifyContent: 'space-between' 而不是alignContent: 'space-between'

【讨论】：

【解决方案3】：

您需要在父样式中添加 flex:1 属性。该属性也称为 justifyContent 而不是 alignContent

您的代码已更正

<View style={{  flex:1, flexDirection: 'column', justifyContent: 'space-between' }}>
            <View style={{ flexDirection: 'row' }}>
                <View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
            </View>
            <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
                <View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
            </View>
        </View>

您可以在此处查看示例：https://snack.expo.io/@clemband/funny-cereal

【讨论】：