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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!