Wie ich mein Bild in meiner React-native Komponente

Question

vertikal nach oben ausgerichtet habe, möchte ich mein Bild in React-native ausrichten. Aber ich weiß nicht, was ich tun soll. Hier ist mein Layout und seinen Stil:

class layout extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.toolbar}> 
      <Text style={styles.left}> 
      Left Button 
      </Text> 
      <Text style={styles.title}> 
      This is my title 
      </Text> 
      <Text style={styles.right}> 
      Right Button 
      </Text> 
     </View> 
     <View style={styles.content}> 
      <Image style={styles.image} 
      source={require('./back.jpg')} 
      resizeMode="contain" 
      ></Image> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: 'white', 
    }, 
    toolbar: { 
    backgroundColor: '#B5AC3a', 
    height:64, 
    flexDirection:'row' 
    }, 
    left: { 
    marginTop:30, 
    fontSize: 14, 
    textAlign: 'center' 
    }, 
    right: { 
    marginTop:30, 
    fontSize: 14, 
    textAlign: 'center' 
    }, 
    title: { 
    marginTop:30, 
    flex: 1, 
    fontSize: 14, 
    textAlign: 'center' 
    }, 
    content: { 
    backgroundColor:'#ffecff' 
    }, 
    image: { 
    width: Dimensions.get('window').width - 20, 
    margin: 10, 
    alignSelf:'center' 
    } 
}); 

Hier ist das Ergebnis:

Anscheinend gibt es viel Platz zwischen meinem Bild oben auf meinem Bildschirm. Ich habe versucht: flex-start. Aber funktioniert nicht. Was soll ich machen? Vielen Dank.

PS: Es ist in Ordnung, wenn ich Ansicht statt Bild wie folgt verwenden:

class layout extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.toolbar}> 
      <Text style={styles.left}> 
      Left Button 
      </Text> 
      <Text style={styles.title}> 
      This is my title 
      </Text> 
      <Text style={styles.right}> 
      Right Button 
      </Text> 
     </View> 
     <View style={styles.content}> 
      <View style={styles.messageBox}> 
      <Text>This is line one</Text> 
      <Text>This is line two</Text> 
      </View> 
     </View> 
     </View> 
    ); 
    } 
} 

Ergebnis:

Answer 1

Ihre resizeMode = 'enthalten' auf image widerspricht den Dimensionen, die Sie in styles.image definieren möchten.
Entfernen Sie einfach resizeMode = "contain" in Ihren <Image> Eigenschaften und es sollte funktionieren.

Etwas anderes: Ich würde Ihnen dringend empfehlen, je nach dem, was Sie zu tun versuchen, ein ScrollView anstelle der einfachen Ansicht zu verwenden, wenn Sie erweiterbaren Inhalt haben (nämlich alles, was nicht komplett statisch ist). Das scheint zu sein, was Sie brauchen.