Как растянуть по вертикали два представления в столбце - React Native Flex? - PullRequest
Новая
       30

Как растянуть по вертикали два представления в столбце - React Native Flex?

0 голосов
/ 16 мая 2018

У меня есть это представление, где в столбце есть два представления: 

    <View style={styles.container}>
        <View style={styles.content}>
            <View style={{backgroundColor: 'orange'}}>
                <Text>Test</Text>
            </View>
            <View style={{backgroundColor: 'yellow'}}>
                <Text>Test2</Text>
            </View>
        </View>
    </View>

Это мои стили: 

container: {
    flexDirection: 'row',
    backgroundColor: 'white',
    justifyContent:'center',
    alignItems:'center',
    height: 80,
    margin: 8,
},
content: {
    flex:1,
    alignItems: 'stretch',
    flexDirection: 'column',
},

Вот ScreenShot того, что выглядит с помощью приведенного выше кода.

Как я могу заставить оранжевый и желтый вид расширяться по вертикали одинаково, не задавая вручную высоту для каждого из них?

Текст внутри должен быть центрирован, но выровнен по левому краю.

1 Ответ

0 голосов
/ 16 мая 2018

Добавьте flex: 1 в каждую ячейку, чтобы они расширились, и добавьте justifyContent: 'center', чтобы сделать текст по центру. Как это: 

  <View style={styles.container}>
    <View style={styles.content}>
      <View style={{ backgroundColor: 'orange', flex: 1, justifyContent: 'center' }}>
        <Text>Test</Text>
      </View>
      <View style={{ backgroundColor: 'yellow', flex: 1, justifyContent: 'center' }}>
        <Text>Test2</Text>
      </View>
    </View>
  </View>
...