Update Image docs and examples to the new asset system

Summary:
After the release of 0.14, static images should be placed in the source code tree and then required as explained in the [Images guide] (https://facebook.github.io/react-native/docs/images.html). This pull request updates the image documentation and examples to the new asset system. UIExplorer tested on iOS and Android.
Closes https://github.com/facebook/react-native/pull/4987

Reviewed By: svcscm

Differential Revision: D2796276

Pulled By: bestander

fb-gh-sync-id: 732ffa2f136391bb8a3e40a54b5b1ff5022c97f2
This commit is contained in:
Andreas Drivenes
2016-01-27 13:21:42 -08:00
committed by facebook-github-bot-4
parent 04d14e5a2e
commit b85a52a461
15 changed files with 14 additions and 98 deletions

View File

@@ -148,15 +148,15 @@ exports.examples = [
},
{
title: 'Plain Static Image',
description: 'Static assets should be required by prefixing with `image!` ' +
'and are located in the app bundle.',
description: 'Static assets should be placed in the source code tree, and ' +
'required in the same way as JavaScript modules.',
render: function() {
return (
<View style={styles.horizontal}>
<Image source={require('image!uie_thumb_normal')} style={styles.icon} />
<Image source={require('image!uie_thumb_selected')} style={styles.icon} />
<Image source={require('image!uie_comment_normal')} style={styles.icon} />
<Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
<Image source={require('./uie_thumb_normal.png')} style={styles.icon} />
<Image source={require('./uie_thumb_selected.png')} style={styles.icon} />
<Image source={require('./uie_comment_normal.png')} style={styles.icon} />
<Image source={require('./uie_comment_highlighted.png')} style={styles.icon} />
</View>
);
},
@@ -320,19 +320,19 @@ exports.examples = [
<View>
<View style={styles.horizontal}>
<Image
source={require('image!uie_thumb_normal')}
source={require('./uie_thumb_normal.png')}
style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa' }]}
/>
<Image
source={require('image!uie_thumb_normal')}
source={require('./uie_thumb_normal.png')}
style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
/>
<Image
source={require('image!uie_thumb_normal')}
source={require('./uie_thumb_normal.png')}
style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
/>
<Image
source={require('image!uie_thumb_normal')}
source={require('./uie_thumb_normal.png')}
style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
/>
</View>