Bild in React Native skalieren

Question

Skalieren Sie Bild wie wir es in HTML tun. img {height:100%; width:100%} in reagieren nativ.

Ich habe versucht resizeMode?: enum('cover', 'contain', 'stretch', 'repeat', 'center') aber keiner von ihnen funktioniert in meinem Fall.

<View style={{ 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
    flexDirection:'row' 
    }}> 
     <View style={{flex:1, backgroundColor:'yellow'}}> 
     <Image 
      style={{width: 50, height: 50}} 
      resizeMode="stretch" 
      source={{uri: 'http://aristotlebuzz.com/wp-content/uploads/2017/01/Facebook.png'}} 
     /> 
     </View> 
     <View style={{flex:1, backgroundColor:"red"}}> 
      <Text>afdafda</Text> 
     </View> 

     </View> 

https://snack.expo.io/ByhjFQo1M

Answer 1

Sie haben die {height: 50} in den Behälter für das Bild hinzufügen ...

... und stellen Sie die Bildgröße auf {flex: 1}

... und Zauber stretch korrekt.

So ersetzen:

<View style={{flex: 1, backgroundColor: 'yellow'}}> 
    <Image 
    style={{width: 50, height: 50}} 
    resizeMode="strech" 
    source={{uri: 'http://aristotlebuzz.com/wp-content/uploads/2017/01/Facebook.png'}} 
    /> 

mit:

<View style={{flex: 1, height: 50, backgroundColor: 'yellow'}}> 
    <Image 
    style={{flex: 1}} 
    resizeMode="stretch" 
    source={{uri: 'http://aristotlebuzz.com/wp-content/uploads/2017/01/Facebook.png'}} 
    />