ネイティブイメージが小さすぎる、ピクセルなしでサイズ変更できない

Question

私はいくつかのPNGアイコンを持っています。私はそれらをそれぞれ3つのサイズで持っています。オリジナル、@ 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> 
) 

そして、これらのスタイルです：あなたはreact-native-responsive-imageを使用し、ロジックを自分で実装したくない場合は

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

。

すべてのアイコンのサイズをResponsiveImageにすると、現在の画面に最適な解像度のアイコンを選択できます。

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

...

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