React Native Image

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 中，图片解析是在非主线程中完成的