Stoppen Sie Text von der Anzeige inline

Question

Mein Text wird inline angezeigt und ich will es nicht.

Warum bewirkt dieser Code, dass er inline angezeigt wird?

<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

Weil Sie flexDirection: 'row' verwenden, wenn Sie es in der Spalte angezeigt werden sollen, nur flexDirection: 'column' verwenden, wie folgt aus:

<Card style={{ 

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

Answer 2

You "in einer Linie" bedeuten? Aufgrund der Verwendung von flex dort - es behandelt alle untergeordneten Elemente als Flex-Elemente (auch einfacher Text) und verteilt sie entsprechend über eine Zeile. Sie können flexDirection in 'Spalte' ändern, um die Texte über einander zu platzieren.