javascript - 停止显示内联文本

Question

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

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

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

Answer 1

你的意思是“在一行中”？由于在其中使用了 flex - 它将所有子元素视为 flex 元素(也是纯文本)并相应地将它们分布在一行中。您可以将 flexDirection 更改为“column”以将文本放置在彼此之上。