Wie auszurichten 2 reagieren nativer Elemente, 1 in den Mittelpunkt und 1 am Anfang

Question

Lassen Sie uns annehmen, dass wir diejenigen reagieren einheimische Arten haben:

var styles = StyleSheet.create({ 
    parentView:{ 
    width: 400, 
    height:150 
    }, 
    containerView:{ 
    flex:1, 
    flexDirection: 'row', 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor:'black' 
    }, 
    child1:{ 
    backgroundColor: 'red', 
    alignSelf: 'flex-start' 
    }, 
    child2: { 
    backgroundColor: 'yellow' 
    } 
} 

und dass wir diese Render-Funktion:

render: function(){ 
    return(
     <View style={styles.parentView}> 
     <View style={styles.containerView}> 
      <Text style={styles.child1}>Child1</Text> 
      <Text style={styles.child2}>Child2</Text> 
     </View> 
     </View> 
    ); 
} 

Dieser Code erzeugt dieses Bild:

aber, was ich erreichen will, ist dieses Bild:

sehr sehr wichtig: Ich möchte child2TOTALLY im containerView, und nicht ein bisschen weit nach rechts zentriert sein, weil der Raum, dass child1 einnimmt.

Wie kann ich das in reagieren-native erreichen *

ps: Beachten Sie, dass dies auf viele Auflösungen laufen (viele Bildschirme mit unterschiedlichen Seitenverhältnissen) so kann es nicht in absoluter Weise eingestellt werden, dass würde dazu führen, dass es nur auf "einigen" Bildschirmen funktioniert, aber nicht auf anderen.

Answer 1

nicht sicher, ob dies der beste Weg ist, es zu tun, aber es funktioniert für mich

render() { 
    return(
     <View style={styles.parentView}> 
     <View style={styles.containerView}> 
     <View style={styles.rowContainer}> 
      <View style={styles.rowItem}> 
      <Text style={styles.child1}>Child1</Text> 
      </View> 
     <View style={styles.rowItem}> 
      <Text style={styles.child2}>Child2</Text> 
     </View> 
     </View> 
     </View> 
    </View> 
); 

const styles = StyleSheet.create({ 
    parentView:{ 
    width: 400, 
    height:150 
    }, 
    containerView:{ 
    flex:1, 
    flexDirection: 'row', 
    alignItems: 'center', 
    backgroundColor:'black' 
    }, 
    rowContainer: { 
    flex: 1, 
    flexDirection: 'column', 
    }, 
    rowItem:{ 
    flex: 1 
    }, 
    child1:{ 
    backgroundColor: 'red', 
    position: 'absolute', 
    }, 
    child2: { 
    alignSelf: 'center', 
    backgroundColor: 'yellow' 
    } 
});