停止顯示內嵌文字

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

由於您使用flexDirection: 'row'，如果你想在列中顯示，只需要使用flexDirection: 'column'，像這樣：

<Card style={{ 

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

Answer 2

你「在一線」是什麼意思？由於在那裏使用了flex，它將所有子元素都視爲彈性項目（也是純文本），並在一行中相應地分配它們。您可以將flexDirection更改爲'列'，將之間的文字置於以上。