图片组件（image）

加载本地图片（js package里）

图片放置在 js的package里

使用 Image 组件即可。

<Image source={require('./img/check.png')} />

也能用变量来动态加载

const icon = "small.png";
<Image source={require("./"+icon)} />

上面描述的require语法也可以用来静态地加载你项目中的声音、视频或者文档文件。

大多数常见文件类型都支持，包括.mp3, .wav, .mp4, .mov, .htm 和 .pdf等。

参考 https://github.com/facebook/metro/blob/main/packages/metro-config/src/defaults/defaults.js#L14-L44

加载混合app的图片

指的是加载原生app的asset里的图片资源。

  • iOS
<Image
 source={{ uri: 'app_icon' }}
 style={{ width: 40, height: 40 }}
/>
  • android
<Image
source={{ uri: 'asset:/app_icon.png' }}
style={{ width: 40, height: 40 }}
/>

注意：这些做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸。

加载网络图片

使用远程地址作为参数即可. 

<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{width: 400, height: 400}} />

注意：跟加载app图片一样，需要指定尺寸。

还能直接制定请求参数

<Image
 source={{
 uri: 'https://facebook.github.io/react/logo-og.png',
 method: 'POST',
 headers: {
 Pragma: 'no-cache'
 },
 body: 'Your Body goes here'
}}
style={{ width: 400, height: 400 }}
/>

组件的背景图**

用ImageBackground 将组件包起来即可，相关属性跟 Image 一样。

<ImageBackground source={uri : ‘app_icon’} style={{width: '100%', height: '100%'}}>
 <Text>Inside</Text>
 </ImageBackground>

图片的圆角

  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomLeftRadius
  • borderBottomRightRadius