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％，以及保持原始宽度：高度宽高比所需的高度？

Answer 1

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

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

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

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

Answer 2

请按以下代码行填写iOS中的内容，并在Android中填充Center Crop。

图片：{ 弹性：1， 宽度：空， 高度：null， resizeMode：“包含” }