Не показывать текст в строке

Question

Не показывать текст в строке

1

Мой текст отображается в строке, и я не хочу этого.

Почему этот код вызывает его отображение?

<Card style={{

  marginBottom: 10,
  flex: 1,
  flexDirection: 'row',
  backgroundColor: 'green'
}}>
  <CardItem style={{


    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'red',

    alignItems: 'center'
  }}>
    <Text style={{
      color: '#FFFFFF',
      marginBottom: 15,
      width: '100%',
      backgroundColor: 'green',
      flexDirection: 'row',
    }}>
      {this.selectedProduct.name}
    </Text>
    <Text style={{
      color: '#FFFFFF',
      marginBottom: 15,
      backgroundColor: 'blue',
      width: '100%'
    }}>
      {this.selectedProduct.description}
    </Text>
    <Text style={{
      backgroundColor: 'yellow',
      color: '#FFFFFF',
      marginBottom: 15,
      width: '100%'
    }}>
      price: {this.selectedProduct.price ? this.selectedProduct.price + ' of your local currency' : 'not entered'}
    </Text>
  </CardItem>
</Card>

BeniaminoBaggins 30 июль 2017, в 01:35

Источник

Теги:

javascript

react-native

css

flexbox

2 ответа

2

Вы имеете в виду "в ОДНОЙ линии"? Это связано с использованием flex в нем - он рассматривает все дочерние элементы как гибкие элементы (также простой текст) и распределяет их соответственно по одной строке. Вы можете изменить flexDirection на "столбец", чтобы разместить тексты друг над другом.

Johannes 29 июль 2017, в 21:49

Ещё вопросы

Commercial Suicide · Accepted Answer · 2017-07-29T21-46-00.000Z

Поскольку вы используете flexDirection: 'row', если вы хотите отобразить его в столбце, просто используйте flexDirection: 'column', например:

<Card style={{

  marginBottom: 10,
  flex: 1,
  flexDirection: 'column',
  backgroundColor: 'green'
}}>