Javascript 停止内联显示文本

我的文本以内联方式显示，我不希望它以内联方式显示

为什么这段代码会导致它以内联方式显示

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

{this.selectedProduct.name}
{this.selectedProduct.description}
价格：{this.selectedProduct.price？this.selectedProduct.price+'您的当地货币'：'未输入'}

因为您使用的是

flexDirection:“行”

，如果您想在列中显示它，只需使用

flexDirection:“列”

，如下所示：

<Card style={{

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

你的意思是“在一行中”？由于在其中使用了

flex

，它将所有子元素都视为flex项（也是纯文本），并将它们相应地分布在一行中。您可以将

flexDirection

更改为“column”，将文本置于彼此上方