React Native: Wie richtet man Inline-Text aus?

Question

Ich möchte, dies zu tun, in dem sowohl die Texte auf 1 horizontale Linie ist und einer von ihnen ist in der Mitte und der andere ist auf dem rechten Seite:

Das ist, was ich habe, ignorieren die Farben (es gar nicht funktioniert):

Stile:

rowLabelText: { 
    color: "#0B1219", 
    fontFamily: Fonts.Knockout31JuniorMiddleWeight, 
    fontSize: 16.0, 
    }, 

Markup:

<View style={{flexDirection: 'row', height: 30, flexWrap: 'wrap', backgroundColor: 'green'}}> 
     <View style={{ flex: 1, backgroundColor: 'red', justifyContent: 'center', alignSelf: 'center'}}> 
     <Text style={styles.rowLabelText}> 
      adjkfdasjkfaskj 
     </Text> 
     </View> 
     <View style={{ flex: 1, backgroundColor: 'blue', justifyContent: 'center', alignSelf: 'flex-end' }}> 
     <Text style={styles.rowLabelText}> 
      adjkfdasjkfaskj 
     </Text> 
     </View> 
    </View> 

Ich habe Probleme. Könnte mir jemand helfen?

Answer 1

Eine Möglichkeit, Text in Bezug auf die gesamte Breite des Bildschirms zu zentrieren und gleichzeitig Text auf der rechten Seite des zentrierten Texts zu haben, ist die absolute Positionierung im rechten Text.

Durch die Verwendung der absoluten Positionierung im rechten Text wird die Position des zentrierten Texts nicht beeinflusst.

<View style={{flexDirection: 'row'}}> 
    <View style={{flex:1, alignItems: 'center', backgroundColor: 'red'}}> 
     <Text>50%</Text> 
    </View> 
    <View style={{position:'absolute', right: 20, backgroundColor: 'blue'}}> 
     <Text>+$0.80</Text> 
    </View> 
</View> 

Answer 2

Es sieht aus wie Ihr Problem mit ist mit alignSelf möchten Sie alignItems verwenden.

So sieht Ihr Code aus.

Ihre Ansicht:

<View style={styles.textContainer}> 

    <View style={styles.leftContainer}> 
     <Text style={styles.rowLabelText}> 
      adjkfdasjkfaskj 
     </Text> 
    </View> 

    <View style={styles.rightContainer}> 
     <Text style={styles.rowLabelText}> 
      adjkfdasjkfaskj 
     </Text> 
    </View> 

</View> 

Ihre Stile:

textContainer:{ 
    flexDirection: 'row', 
    height: 30, 
    backgroundColor: 'green' 
    }, 
    leftContainer:{ 
    flex: 1, 
    justifyContent: 'center', 
    alignItems:'center', 
    backgroundColor: 'red', 
    }, 
    rightContainer:{ 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'flex-end', 
    backgroundColor: 'blue', 
    }, 
    rowLabelText: { 
    color: "#0B1219", 
    fontSize: 16.0, 
    },