Native reagieren - übergeordnete Ansicht, um die untergeordnete Ansicht zu umhüllen

Question

Ich habe eine Ansicht mit Text darin. Die Komponente sieht wie folgt aus:

MyComponent =() => { 
    return (
     <View style={styles.viewStyle}> 
      <Text style={styles.textStyle}>My Text</Text> 
     </View> 
    ); 
} 

const styles = { 
    viewStyle: { 
     backgroundColor: '#006699', 
     height: 40, 
     justifyContent: 'center', 
     alignItems: 'center', 
    }, 
    textStyle: { 
     color: '#000000', 
     fontSize: 16, 
    } 
} 

Wenn diese Komponente verwendet wird, ich meine Ansicht wollen solch eine benutzerdefinierte Breite haben, dass es mein Text nur einwickelt. Hier ist der visuelle Hinweis:

Answer 1

hier nichts zu tun Komponente reagieren ..

const styles = { 
    .... 
    textStyle: { 
     color: '#000000', 
     fontSize: 16, 
     float:left, 
     padding:5px 
    } 
} 

Answer 2

Es geht um den ursprünglichen Entwurf von Layout with Flexbox.

Sie können es durch funktionieren entweder flexDirection: 'row' hinzufügen, um es übergeordnete Ansicht ist (so dass es automatisch auf <Text /> Breite bezogen strecken),

<View style={{flex: 1, flexDirection: 'row'}}> 
    <View style={styles.viewStyle}> 
    <Text style={styles.textStyle}>My Text</Text> 
    </View>     
</View> 

oder es direkt geben Breite.

<View style=[{styles.viewStyle}, {width: 50}]> 
    <Text style={styles.textStyle}>My Text</Text> 
</View>     

Ergebnis Option 1: