react-native - 在 React Native 中缩放图像

Question

像在 HTML 中一样缩放图像。 img {高度:100%； width:100%} 在 native react 中。

我已经尝试过 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>