テキストのインライン表示の停止

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: 'column'を使用し、flexDirection: 'row'を使用しているので：

<Card style={{ 

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

Answer 2

あなたが意味する "ONE行に"？それはそこにflexを使用しているため、すべての子要素をフレックス項目（プレーンテキスト）として扱い、それを1行に渡って適切に分配します。 flexDirectionを「列」に変更して、の文字をそれぞれの上に置くことができます。