You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/Images.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ As of 0.14 release, React Native provides a unified way of managing images in yo
15
15
<Image source={require('./my-icon.png')} />
16
16
```
17
17
18
-
Image name is resolved the same way JS modules are resolved. In the example above the packager will look for `my-icon.png` in the same folder as the component that requires it. Also if you have `my-icon.ios.png` and `my-icon.android.png`, the packager will pick the file depending on the platform you are running on.
18
+
The image name is resolved the same way JS modules are resolved. In the example above the packager will look for `my-icon.png` in the same folder as the component that requires it. Also if you have `my-icon.ios.png` and `my-icon.android.png`, the packager will pick the file depending on the platform you are running on.
19
19
20
20
You can also use `@2x`, `@3x`, etc. suffix in the file name to provide images for different screen densities. For example, if you have the following file structure:
21
21
@@ -33,19 +33,19 @@ And `button.js` code contains
33
33
<Image source={require('./img/check.png')} />
34
34
```
35
35
36
-
Packager will bundle and server image corresponding to device's screen density, e.g. on iPhone 5s `[email protected]` will be used, on Nexus 5 – `[email protected]`. If there is no image matching screen density, closest best option will be selected.
36
+
Packager will bundle and serve the image corresponding to device's screen density, e.g. on iPhone 5s `[email protected]` will be used, on Nexus 5 – `[email protected]`. If there is no image matching the screen density, the closest best option will be selected.
37
37
38
38
Here are some benefits that you get:
39
39
40
40
1. Same system on iOS and Android
41
41
2. Images live in the same folder as your JS code. Components are self-contained.
42
42
3. No global namespace, i.e. you don't have worry about name collisions.
43
43
4. Only the images that are actually used will be packaged into your app.
44
-
5. Adding and changing images doesn't require app recompilation, just refresh simulator as you normally do.
45
-
6.Packager knows image size, no need to duplicate it in the code.
44
+
5. Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do.
45
+
6.The packager knows the image dimensions, no need to duplicate it in the code.
46
46
7. Images can be distributed via [npm](https://www.npmjs.com/) packages.
47
47
48
-
Note that in order for this to work, image name in `require` has to be known statically.
48
+
Note that in order for this to work, the image name in `require` has to be known statically.
49
49
50
50
```javascript
51
51
// GOOD
@@ -115,7 +115,7 @@ In React Native, one interesting decision is that the `src` attribute is named `
115
115
<Image source={{uri:'something.jpg'}} />
116
116
```
117
117
118
-
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using `require('./my-icon.png')`, then we add information about it's actual location and size (don't rely on this fact, it might 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.
118
+
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using `require('./my-icon.png')`, then we add information about its actual location and size (don't rely on this fact, it might 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.
119
119
120
120
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.
0 commit comments