停止显示内联文本答案

【问题标题】：Stop text from displaying inline停止显示内联文本
【发布时间】：2018-01-05 18:50:50
【问题描述】：

我的文本内嵌显示，我不希望这样。

为什么这段代码会内联显示？

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

【问题讨论】：

标签： javascript css react-native flexbox

【解决方案1】：

你的意思是“一行”？这是由于在其中使用了flex - 它将所有子元素视为弹性项目（也是纯文本）并相应地将它们分布在一行中。您可以将flexDirection 更改为“列”以将文本置于之上。

【讨论】：

【解决方案2】：

因为你使用的是flexDirection: 'row'，所以如果你想在列中显示，就使用flexDirection: 'column'，像这样：

<Card style={{

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

【讨论】：