Question

我有一些PNG图标。我有三种尺寸;原创，@ 2x和@ 3x。尺寸绝对正确，范围从16x11到48x33。当我在应用程序的其他地方使用它们时，它们看起来很好。

我的Image内的图标位于View包装中。当我没有为它们添加任何尺寸时，它们看起来很小，比图像本身小。当我向Image标签添加高度和宽度时，它们会变得像素化。

这是组件：

const ListButton = ({ icon, children: text, onPress, ...props }) => (
  <ListItem style={style.listItem} onPress={onPress}>
    {
      icon && <View style={style.iconWrapper}>
        <Image style={style.icon} source={icon} />
      </View>
    }
    <Left>
      <Text style={style.text}>{text}</Text>
    </Left>
    <Right>
      <Icon style={style.arrow} name='arrow-forward' />
    </Right>
  </ListItem>
)

这些是风格：

export default {
  listItem: {
    height: 40,
    margin: 0
  },
  iconWrapper: {
    width: 40,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: variables.listBackgroundColor
  },
  // todo
  icon: {
    height: 17.5,
    width: 17.5
  },
  text: {
    fontSize: variables.noteFontSize,
    color: variables.listTextColor
  },
  arrow: {
    color: variables.listBorderColor
  }
}

由于

Answer 1

如果您不希望自己实施逻辑，请使用react-native-responsive-image。

将所有图标大小传递给ResponsiveImage，它可以为您选择当前屏幕的最佳分辨率图标。

import ResponsiveImage from 'react-native-responsive-image'

...

<ResponsiveImage
  sources={{
    1: {icon1x},
    2: {icon2x},
    3: {icon3x},
  }}
/>

反映本机图像太小，无法在没有像素化的情况下调整大小

1 个答案: