Как выровнять виды сверху и снизу, слева и справа?

Question

Я пытаюсь создать дизайн пользовательского интерфейса, вот мой текущий дизайн:

В этом у меня есть два вида прямоугольной формы, вот мой код:

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

Ожидаемый результат: первый прямоугольник должен быть слева вверху (который выглядит правильно на изображении ниже), а второй прямоугольник должен быть справа внизу.Но его размещение рядом с первым прямоугольником.

Как переместить прямоугольник в правый нижний угол?Я перепробовал все, вроде выравнивания контента, с гибким концом, но ничего не изменилось.Пожалуйста, помогите

Answer 1

    <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'

Answer 2

Вам нужно добавить свойство 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

Answer 3

Использование 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);

Вывод: