反應本機圖像太小，無法調整大小沒有像素化

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

感謝

來源

2017-04-12 JmJ

如果你不希望自己實現的邏輯，使用react-native-responsive-image。

將所有圖標大小傳遞給ResponsiveImage，它可以爲您選擇當前屏幕的最佳分辨率圖標。

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

...

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

來源

2017-04-12 10:20:53

反應本機圖像太小，無法調整大小沒有像素化

回答

相關問題