文章目錄

source:图片引用地址

网络图片:source={ { uri: 'http//xx.png'}}
本地图片:source={require('./xx.png')}

如果你有my-icon.ios.png和my-icon.android.png,Packager就会根据平台而选择不同的文件。

你还可以使用@2x,@3x这样的文件名后缀,来为不同的屏幕精度提供图片

注意:为了使新的图片资源机制正常工作,require中图片的名字必须是一个静态字符串, 因为React Native 在编译代码时处理所有的require声明,而不是在运行时的动态处理

// 正确
<Image source={require('./my-icon.png')} />

// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

网络图片需要手动指定尺寸
在浏览器中,如果你不给图片指定尺寸,那么浏览器会首先渲染一个0x0大小的元素占位,然后下载图片,在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是UI会在图片加载的过程中上下跳动,使得用户体验非常糟糕。

注意: 在html中只设置宽高的一个,图片会等比例缩放, 但在RN中并不会,因为它会提前渲染宽高,所以在RN中你要同时指定图片的宽高

在React Native中我们有意避免了这一行为。如此一来开发者就需要做更多工作来提前知晓远程图片的尺寸(或宽高比),但我们相信这样可以带来更好的用户体验。然而,从已经打包好的应用资源文件中读取图片(使用require(‘image!x’)语法)则无需指定尺寸,因为它们的尺寸在加载时就可以立刻知道。

开发者们常面对的一种需求就是类似web中的背景图(background-image)。要实现这一用例,只需简单地创建一个组件,然后把需要背景图的子组件嵌入其中即可。

return (
<Image source={...}>
    <Text>Inside</Text>
</Image>
);
文章目錄