kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-23 03:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

[Image] Add support for tintColor to remote images

Browse Source 
Summary:
Remote images now support the `tintColor` prop.

Also picked nicer demo colors for the UIExplorer example.

Fixes #1867

Closes https://github.com/facebook/react-native/pull/1932
Github Author: James Ide <ide@jameside.com>
This commit is contained in:
James Ide
2015-07-13 10:30:34 -07:00
parent 90dd7a13f0
commit d5943b0e47
6 changed files with 78 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
Examples/UIExplorer/ImageExample.js
View File

@@ -194,23 +194,46 @@ exports.examples = [
'pixels to the tint color.',
render: function() {
return (
<View style={styles.horizontal}>
<Image
source={require('image!uie_thumb_normal')}
style={[styles.icon, {tintColor: 'blue' }]}
/>
<Image
source={require('image!uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: 'green' }]}
/>
<Image
source={require('image!uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: 'red' }]}
/>
<Image
source={require('image!uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: 'black' }]}
/>
<View>
<View style={styles.horizontal}>
<Image
source={require('image!uie_thumb_normal')}
style={[styles.icon, {tintColor: '#5ac8fa' }]}
/>
<Image
source={require('image!uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: '#4cd964' }]}
/>
<Image
source={require('image!uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: '#ff2d55' }]}
/>
<Image
source={require('image!uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: '#8e8e93' }]}
/>
</View>
<Text style={styles.sectionText}>
It also works with downloaded images:
</Text>
<View style={styles.horizontal}>
<Image
source={smallImage}
style={[styles.base, {tintColor: '#5ac8fa' }]}
/>
<Image
source={smallImage}
style={[styles.base, styles.leftMargin, {tintColor: '#4cd964' }]}
/>
<Image
source={smallImage}
style={[styles.base, styles.leftMargin, {tintColor: '#ff2d55' }]}
/>
<Image
source={smallImage}
style={[styles.base, styles.leftMargin, {tintColor: '#8e8e93' }]}
/>
</View>
</View>
);
},
@@ -283,6 +306,9 @@ var styles = StyleSheet.create({
background: {
backgroundColor: '#222222'
},
sectionText: {
marginVertical: 6,
},
nestedText: {
marginLeft: 12,
marginTop: 20,