react-native-android静态图像它看起来太大了

Question

​

<Image
  style={{backgroundColor: 'rgb(205, 128, 6)'}}
  resizeMode='contain'
  source={require('image!ic_create_black_48dp')}/>

​

在这段从UIExplorer复制的代码中，我将这个png放到相同的文件夹(res/ ic_create_black_48dp (96*96px) )中。它看起来不像一张96*96px大小的照片。

​

​

在此期间，我尝试将png放入drawable-hdpi drawable-xhdpi drawable-xxhdpi

但是没有其他效果。

Answer 1

对于这种类型的图像，您应该指定width height作为组件的样式属性。

<Image style={{width:96, height: 96}} src={...}/>

请注意，在android上，宽度/高度以DP表示，而不是以PX表示。

在你的例子中，它看起来图像实际上很小，但渲染在一个更大的容器中。您可以指定图像在这种情况下的行为方式，例如，使用resizeMode style属性拉伸到组件的大小。

最后，我建议您使用新的语法来使用静态资源文档here，它将自动生成图像的尺寸，而不是require，并允许您避免在代码中指定它们。