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

在React Native中缩放图像

1 个答案: