React-Native Flexbox - Позиционируйте один предмет в вертикальном центре, а другой внизу - PullRequest
Новая
       33

React-Native Flexbox - Позиционируйте один предмет в вертикальном центре, а другой внизу

0 голосов
/ 23 января 2019

В родительском представлении я хотел бы выровнять по вертикали один фрагмент текста по центру, а другой - в нижней части представления. Каждый раз, когда я добавляю нижний текст, он сдвигает положение вертикально центрированного вида вверх (чтобы сделать еговертикальный центр оставшегося пространства).

Как сохранить выравнивание текста по центру относительно родительского вида?Обновление: я понимаю, что могу сделать это, используя {position: 'absolute', bottom: 0}, но хочу понять решение flex-box. 

<View style={{height: 300, borderColor: "black", borderWidth: 1}}>
    <View style={{ justifyContent: "center", flex: 1 }}>
        <Text>Vert Middle</Text>
    </View>

    <View>
        <Text>Vert Bottom</Text>
    </View>
</View>

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Это сработает для вас.Также ответ @Nitish будет работать. 

render() {
    return (
        <View style={{
            height: 300,
            borderColor: "black",
            borderWidth: 1
        }}>
            <View style={{
                justifyContent: "center",
                flex: 1
            }}>
                <Text>Vert Middle</Text>
            </View>

            <View style={{
                height:0, //Here...
                justifyContent: "flex-end",
            }}>
                <Text>Vert Bottom</Text>
            </View>
        </View>
    );
}
0 голосов
/ 23 января 2019

Просто попробуйте ниже код 

      <View style={{height: 300, borderColor: "balck", borderWidth: 1}}>
          <View style={{ backgroundColor: 'red', justifyContent: "center", flex: 1 }}>
              <Text>Vert Middle</Text>
          </View>

          <View style={{position: 'absolute', bottom: 0}}> // Here is your updations
              <Text>Vert Bottom</Text>
          </View>
      </View>
...