kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-06 17:34:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update Image.md

Browse Source 
s/ix/require('image!')/
This commit is contained in:
Christopher Chedeau
2015-03-21 11:04:05 -07:00
parent 4f8a86e8d7
commit 1899516a52
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/Image.md
View File

@@ -24,20 +24,18 @@ Image decoding can take more than a frame-worth of time. This is one of the majo
## Static Assets
In the course of a project, it is not uncommon to add and remove many images and accidentally end up shipping images you are no longer using in the app. In order to fight this, we need to find a way to know statically which images are being used in the app. To do that, we introduced a marker called `ix`. The only allowed way to refer to an image in the bundle is to literally write `ix('name-of-the-asset')` in the source.
In the course of a project, it is not uncommon to add and remove many images and accidentally end up shipping images you are no longer using in the app. In order to fight this, we need to find a way to know statically which images are being used in the app. To do that, we introduced a marker on require. The only allowed way to refer to an image in the bundle is to literally write `require('image!name-of-the-asset')` in the source.
```javascript
var { ix } = React;
// GOOD
<Image source={ix('my-icon')} />
<Image source={require('image!my-icon')} />
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={ix(icon)} />
<Image source={require('image!' + icon)} />
// GOOD
var icon = this.props.active ? ix('my-icon-active') : ix('my-icon-inactive');
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />
```
@@ -55,6 +53,6 @@ In React Native, one interesting decision is that the `src` attribute is named `
<Image source={{uri: 'something.jpg'}} />
```
On the infrastructure side, the reason is that it allows to attach metadata to this object. For example if you are using `ix`, then we add an `isStatic` attribute to flag it as a local file (don't rely on this fact, it's likely to change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting `{uri: ...}`, we can output `{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}` and transparently support spriting on all the existing call sites.
On the infrastructure side, the reason is that it allows to attach metadata to this object. For example if you are using `require('image!icon')`, then we add an `isStatic` attribute to flag it as a local file (don't rely on this fact, it's likely to change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting `{uri: ...}`, we can output `{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}` and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.