React Native Image

最新推荐文章于 2024-04-13 03:43:23 发布

转载最新推荐文章于 2024-04-13 03:43:23 发布 · 429 阅读

文章标签：

#react-native #image

本文详细介绍了在React Native中处理图片的各种方式，包括使用静态图片资源、不同分辨率下的图片加载、网络图片的尺寸设定及加载方式、URI数据图片的使用方法、以及如何设置背景图片等。同时提供了良好的代码实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Image

静态图片资源

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

针对不同的分辨率：

.
├── button.js
└── img
    ├── check@2x.png
    └── check@3x.png

// Good way
<Image source={require('./my-icon.png')} />;

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

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');

<Image source={icon} />;

对于在 Assert 中的图片

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

网络图片
Unlike with static resources, you will need to manually specify the dimensions of your image.
不像静态资源，网络图片需要手动指定图片的大小

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

// BAD
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} />

网络请求图片：

<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}}
/>

Uri 数据图片：

// include at least width and height!
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: Image.resizeMode.contain,
  }}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }}
/>

背景图片

return (
  <ImageBackground source={...}>
    <Text>Inside</Text>
  </ImageBackground>
);

在 React Native 中，图片解析是在非主线程中完成的