在 React Native 中缩放图像

Question

像我们在HTML中一样缩放图像。 img {height:100%; width:100%}在反应本机中。

我已经尝试过resizeMode?: enum('cover', 'contain', 'stretch', 'repeat', 'center')但它们都不适合我的情况。

<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

您必须将{height: 50}添加到图像的容器中...

。并将图像大小设置为{flex: 1}

。并正确拼写stretch。🙃

所以替换：

<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'}}
   />

跟：

<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'}}
   />
</View>