React Native Aspect fit图像

Question

    <Image
      style={{
        alignSelf: 'center',
        flex: 1,
        width: '25%',
        height: null,
        resizeMode: 'cover',
        borderWidth: 1,
        borderRadius: 75,
      }}
      source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
      resizeMode="stretch"
    />

https://snack.expo.io/rJCoC9S5-

如何将图像宽度设置为父图像的25%，并将图像高度设置为保持原始宽度:高度纵横比所需的值？

Answer 1

您可以像这样编辑图像的样式：

<Image style={style.image} source={require('.....')} />

const style = StyleSheet.create({
  image: {
    height: 80,
    width: 80,
    resizeMode: 'contain'
  }
});

contain就是你要找的东西。但还有更多像strech和cover这样的选择。

Answer 2

Aspect Fill in iOS和Center Crop in Android中的这些代码行。

图像：{ flex: 1，宽度: null，高度: null，resizeMode：‘包含’}

​

​