React Native Aspect适合图像

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％，并将其高度设置为保持原始的width：height纵横比所需的高度？

Answer 1

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

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

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

contain是您要寻找的。但是还有更多选择，例如strech和cover。