反应本机图像太小，无法调整大小没有像素化

问题描述：

我有一些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 
    } 
}

感谢

答

如果你不希望自己实现的逻辑，使用react-native-responsive-image。

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

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

...

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

反应本机图像太小，无法调整大小没有像素化

相关推荐