mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-03-29 22:41:56 +08:00
5903949ad6
Summary:
This uses `[UIImage imageNamed:]` to load local assets that are bundled using `require('../image/path.png')` and makes sure it is done synchronously on the main queue to prevent images from flickering. This improves user experience a lot when using large local images and prevents icon flickers to match the behaviour of most native apps.
This adds to methods to the ImageLoader protocol, one to tell if the image loader must be executed on the url cache queue and one to tell if the result of the image loader should be cached. I then use these to make the LocalImageLoader bypass the url cache queue and avoid caching images twice.
Note that this doesn't affect debug builds since images are loaded from the packager.
I'm not sure if we want to still support async loading of local images as I'm not sure how much of a perf difference this will make. Maybe someone at fb can benchmark this see how it affects your apps but there wasn't a noticeable one in mine. Also I only enabled this for loading png and jpg im
Closes https://github.com/facebook/react-native/pull/8102
Reviewed By: bnham
Differential Revision: D3433647
Pulled By: javache
fbshipit-source-id: 37bd6aff20c0465c163db3cdbcaeaedff55f7b1f
668 lines
20 KiB
JavaScript
668 lines
20 KiB
JavaScript
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* The examples provided by Facebook are for non-commercial testing and
|
|
* evaluation purposes only.
|
|
*
|
|
* Facebook reserves all rights not expressly granted.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
|
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
|
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
|
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
*
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var React = require('react');
|
|
var ReactNative = require('react-native');
|
|
var {
|
|
ActivityIndicator,
|
|
Image,
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} = ReactNative;
|
|
|
|
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
|
|
|
|
var ImageCapInsetsExample = require('./ImageCapInsetsExample');
|
|
const IMAGE_PREFETCH_URL = 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now();
|
|
var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
|
|
|
|
var NetworkImageCallbackExample = React.createClass({
|
|
getInitialState: function() {
|
|
return {
|
|
events: [],
|
|
startLoadPrefetched: false,
|
|
mountTime: new Date(),
|
|
};
|
|
},
|
|
|
|
componentWillMount() {
|
|
this.setState({mountTime: new Date()});
|
|
},
|
|
|
|
render: function() {
|
|
var { mountTime } = this.state;
|
|
|
|
return (
|
|
<View>
|
|
<Image
|
|
source={this.props.source}
|
|
style={[styles.base, {overflow: 'visible'}]}
|
|
onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
|
|
onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
|
|
onLoadEnd={() => {
|
|
this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
|
|
this.setState({startLoadPrefetched: true}, () => {
|
|
prefetchTask.then(() => {
|
|
this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`);
|
|
}, error => {
|
|
this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`);
|
|
});
|
|
});
|
|
}}
|
|
/>
|
|
{this.state.startLoadPrefetched ?
|
|
<Image
|
|
source={this.props.prefetchedSource}
|
|
style={[styles.base, {overflow: 'visible'}]}
|
|
onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
|
|
onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
|
|
onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
|
|
/>
|
|
: null}
|
|
<Text style={{marginTop: 20}}>
|
|
{this.state.events.join('\n')}
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
|
|
_loadEventFired(event) {
|
|
this.setState((state) => {
|
|
return state.events = [...state.events, event];
|
|
});
|
|
}
|
|
});
|
|
|
|
var NetworkImageExample = React.createClass({
|
|
getInitialState: function() {
|
|
return {
|
|
error: false,
|
|
loading: false,
|
|
progress: 0
|
|
};
|
|
},
|
|
render: function() {
|
|
var loader = this.state.loading ?
|
|
<View style={styles.progress}>
|
|
<Text>{this.state.progress}%</Text>
|
|
<ActivityIndicator style={{marginLeft:5}} />
|
|
</View> : null;
|
|
return this.state.error ?
|
|
<Text>{this.state.error}</Text> :
|
|
<Image
|
|
source={this.props.source}
|
|
style={[styles.base, {overflow: 'visible'}]}
|
|
onLoadStart={(e) => this.setState({loading: true})}
|
|
onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})}
|
|
onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})}
|
|
onLoad={() => this.setState({loading: false, error: false})}>
|
|
{loader}
|
|
</Image>;
|
|
}
|
|
});
|
|
|
|
var ImageSizeExample = React.createClass({
|
|
getInitialState: function() {
|
|
return {
|
|
width: 0,
|
|
height: 0,
|
|
};
|
|
},
|
|
componentDidMount: function() {
|
|
Image.getSize(this.props.source.uri, (width, height) => {
|
|
this.setState({width, height});
|
|
});
|
|
},
|
|
render: function() {
|
|
return (
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Image
|
|
style={{
|
|
width: 60,
|
|
height: 60,
|
|
backgroundColor: 'transparent',
|
|
marginRight: 10,
|
|
}}
|
|
source={this.props.source} />
|
|
<Text>
|
|
Actual dimensions:{'\n'}
|
|
Width: {this.state.width}, Height: {this.state.height}
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
});
|
|
|
|
var MultipleSourcesExample = React.createClass({
|
|
getInitialState: function() {
|
|
return {
|
|
width: 30,
|
|
height: 30,
|
|
};
|
|
},
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
|
|
<Text
|
|
style={styles.touchableText}
|
|
onPress={this.decreaseImageSize} >
|
|
Decrease image size
|
|
</Text>
|
|
<Text
|
|
style={styles.touchableText}
|
|
onPress={this.increaseImageSize} >
|
|
Increase image size
|
|
</Text>
|
|
</View>
|
|
<Text>Container image size: {this.state.width}x{this.state.height} </Text>
|
|
<View
|
|
style={{height: this.state.height, width: this.state.width}} >
|
|
<Image
|
|
style={{flex: 1}}
|
|
source={[
|
|
{uri: 'http://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
|
|
{uri: 'http://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},
|
|
{uri: 'http://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
|
|
]}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
},
|
|
increaseImageSize: function() {
|
|
if (this.state.width >= 100) {
|
|
return;
|
|
}
|
|
this.setState({
|
|
width: this.state.width + 10,
|
|
height: this.state.height + 10,
|
|
});
|
|
},
|
|
decreaseImageSize: function() {
|
|
if (this.state.width <= 10) {
|
|
return;
|
|
}
|
|
this.setState({
|
|
width: this.state.width - 10,
|
|
height: this.state.height - 10,
|
|
});
|
|
},
|
|
});
|
|
|
|
exports.displayName = (undefined: ?string);
|
|
exports.framework = 'React';
|
|
exports.title = '<Image>';
|
|
exports.description = 'Base component for displaying different types of images.';
|
|
|
|
exports.examples = [
|
|
{
|
|
title: 'Plain Network Image',
|
|
description: 'If the `source` prop `uri` property is prefixed with ' +
|
|
'"http", then it will be downloaded from the network.',
|
|
render: function() {
|
|
return (
|
|
<Image
|
|
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
|
|
style={styles.base}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Plain Static Image',
|
|
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('./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>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Image Loading Events',
|
|
render: function() {
|
|
return (
|
|
<NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
|
|
prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Error Handler',
|
|
render: function() {
|
|
return (
|
|
<NetworkImageExample source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
|
|
);
|
|
},
|
|
platform: 'ios',
|
|
},
|
|
{
|
|
title: 'Image Download Progress',
|
|
render: function() {
|
|
return (
|
|
<NetworkImageExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
|
|
);
|
|
},
|
|
platform: 'ios',
|
|
},
|
|
{
|
|
title: 'defaultSource',
|
|
description: 'Show a placeholder image when a network image is loading',
|
|
render: function() {
|
|
return (
|
|
<Image
|
|
defaultSource={require('./bunny.png')}
|
|
source={{uri: 'http://facebook.github.io/origami/public/images/birds.jpg'}}
|
|
style={styles.base}
|
|
/>
|
|
);
|
|
},
|
|
platform: 'ios',
|
|
},
|
|
{
|
|
title: 'Border Color',
|
|
render: function() {
|
|
return (
|
|
<View style={styles.horizontal}>
|
|
<Image
|
|
source={smallImage}
|
|
style={[
|
|
styles.base,
|
|
styles.background,
|
|
{borderWidth: 3, borderColor: '#f099f0'}
|
|
]}
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Border Width',
|
|
render: function() {
|
|
return (
|
|
<View style={styles.horizontal}>
|
|
<Image
|
|
source={smallImage}
|
|
style={[
|
|
styles.base,
|
|
styles.background,
|
|
{borderWidth: 5, borderColor: '#f099f0'}
|
|
]}
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Border Radius',
|
|
render: function() {
|
|
return (
|
|
<View style={styles.horizontal}>
|
|
<Image
|
|
style={[styles.base, {borderRadius: 5}]}
|
|
source={fullImage}
|
|
/>
|
|
<Image
|
|
style={[styles.base, styles.leftMargin, {borderRadius: 19}]}
|
|
source={fullImage}
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Background Color',
|
|
render: function() {
|
|
return (
|
|
<View style={styles.horizontal}>
|
|
<Image source={smallImage} style={styles.base} />
|
|
<Image
|
|
style={[
|
|
styles.base,
|
|
styles.leftMargin,
|
|
{backgroundColor: 'rgba(0, 0, 100, 0.25)'}
|
|
]}
|
|
source={smallImage}
|
|
/>
|
|
<Image
|
|
style={[styles.base, styles.leftMargin, {backgroundColor: 'red'}]}
|
|
source={smallImage}
|
|
/>
|
|
<Image
|
|
style={[styles.base, styles.leftMargin, {backgroundColor: 'black'}]}
|
|
source={smallImage}
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Opacity',
|
|
render: function() {
|
|
return (
|
|
<View style={styles.horizontal}>
|
|
<Image
|
|
style={[styles.base, {opacity: 1}]}
|
|
source={fullImage}
|
|
/>
|
|
<Image
|
|
style={[styles.base, styles.leftMargin, {opacity: 0.8}]}
|
|
source={fullImage}
|
|
/>
|
|
<Image
|
|
style={[styles.base, styles.leftMargin, {opacity: 0.6}]}
|
|
source={fullImage}
|
|
/>
|
|
<Image
|
|
style={[styles.base, styles.leftMargin, {opacity: 0.4}]}
|
|
source={fullImage}
|
|
/>
|
|
<Image
|
|
style={[styles.base, styles.leftMargin, {opacity: 0.2}]}
|
|
source={fullImage}
|
|
/>
|
|
<Image
|
|
style={[styles.base, styles.leftMargin, {opacity: 0}]}
|
|
source={fullImage}
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Nesting',
|
|
render: function() {
|
|
return (
|
|
<Image
|
|
style={{width: 60, height: 60, backgroundColor: 'transparent'}}
|
|
source={fullImage}>
|
|
<Text style={styles.nestedText}>
|
|
React
|
|
</Text>
|
|
</Image>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Tint Color',
|
|
description: 'The `tintColor` style prop changes all the non-alpha ' +
|
|
'pixels to the tint color.',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<View style={styles.horizontal}>
|
|
<Image
|
|
source={require('./uie_thumb_normal.png')}
|
|
style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa' }]}
|
|
/>
|
|
<Image
|
|
source={require('./uie_thumb_normal.png')}
|
|
style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
|
|
/>
|
|
<Image
|
|
source={require('./uie_thumb_normal.png')}
|
|
style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
|
|
/>
|
|
<Image
|
|
source={require('./uie_thumb_normal.png')}
|
|
style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
|
|
/>
|
|
</View>
|
|
<Text style={styles.sectionText}>
|
|
It also works with downloaded images:
|
|
</Text>
|
|
<View style={styles.horizontal}>
|
|
<Image
|
|
source={smallImage}
|
|
style={[styles.base, {borderRadius: 5, tintColor: '#5ac8fa' }]}
|
|
/>
|
|
<Image
|
|
source={smallImage}
|
|
style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
|
|
/>
|
|
<Image
|
|
source={smallImage}
|
|
style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
|
|
/>
|
|
<Image
|
|
source={smallImage}
|
|
style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Resize Mode',
|
|
description: 'The `resizeMode` style prop controls how the image is ' +
|
|
'rendered within the frame.',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
{[smallImage, fullImage].map((image, index) => {
|
|
return (
|
|
<View key={index}>
|
|
<View style={styles.horizontal}>
|
|
<View>
|
|
<Text style={[styles.resizeModeText]}>
|
|
Contain
|
|
</Text>
|
|
<Image
|
|
style={styles.resizeMode}
|
|
resizeMode={Image.resizeMode.contain}
|
|
source={image}
|
|
/>
|
|
</View>
|
|
<View style={styles.leftMargin}>
|
|
<Text style={[styles.resizeModeText]}>
|
|
Cover
|
|
</Text>
|
|
<Image
|
|
style={styles.resizeMode}
|
|
resizeMode={Image.resizeMode.cover}
|
|
source={image}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View style={styles.horizontal}>
|
|
<View>
|
|
<Text style={[styles.resizeModeText]}>
|
|
Stretch
|
|
</Text>
|
|
<Image
|
|
style={styles.resizeMode}
|
|
resizeMode={Image.resizeMode.stretch}
|
|
source={image}
|
|
/>
|
|
</View>
|
|
{ Platform.OS === 'ios' ?
|
|
<View style={styles.leftMargin}>
|
|
<Text style={[styles.resizeModeText]}>
|
|
Repeat
|
|
</Text>
|
|
<Image
|
|
style={styles.resizeMode}
|
|
resizeMode={Image.resizeMode.repeat}
|
|
source={image}
|
|
/>
|
|
</View>
|
|
: null }
|
|
{ Platform.OS === 'android' ?
|
|
<View style={styles.leftMargin}>
|
|
<Text style={[styles.resizeModeText]}>
|
|
Center
|
|
</Text>
|
|
<Image
|
|
style={styles.resizeMode}
|
|
resizeMode={Image.resizeMode.center}
|
|
source={image}
|
|
/>
|
|
</View>
|
|
: null }
|
|
</View>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Animated GIF',
|
|
render: function() {
|
|
return (
|
|
<Image
|
|
style={styles.gif}
|
|
source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
|
|
/>
|
|
);
|
|
},
|
|
platform: 'ios',
|
|
},
|
|
{
|
|
title: 'Base64 image',
|
|
render: function() {
|
|
return (
|
|
<Image
|
|
style={styles.base64}
|
|
source={{uri: base64Icon, scale: 3}}
|
|
/>
|
|
);
|
|
},
|
|
platform: 'ios',
|
|
},
|
|
{
|
|
title: 'Cap Insets',
|
|
description:
|
|
'When the image is resized, the corners of the size specified ' +
|
|
'by capInsets will stay a fixed size, but the center content and ' +
|
|
'borders of the image will be stretched. This is useful for creating ' +
|
|
'resizable rounded buttons, shadows, and other resizable assets.',
|
|
render: function() {
|
|
return <ImageCapInsetsExample />;
|
|
},
|
|
platform: 'ios',
|
|
},
|
|
{
|
|
title: 'Image Size',
|
|
render: function() {
|
|
return <ImageSizeExample source={fullImage} />;
|
|
},
|
|
},
|
|
{
|
|
title: 'MultipleSourcesExample',
|
|
description:
|
|
'The `source` prop allows passing in an array of uris, so that native to choose which image ' +
|
|
'to diplay based on the size of the of the target image',
|
|
render: function() {
|
|
return <MultipleSourcesExample />;
|
|
},
|
|
platform: 'android',
|
|
},
|
|
{
|
|
title: 'Legacy local image',
|
|
description:
|
|
'Images shipped with the native bundle, but not managed ' +
|
|
'by the JS packager',
|
|
render: function() {
|
|
return (
|
|
<Image
|
|
source={require('image!hawk')}
|
|
style={styles.base}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
|
|
var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small_2x.png'};
|
|
|
|
var styles = StyleSheet.create({
|
|
base: {
|
|
width: 38,
|
|
height: 38,
|
|
},
|
|
progress: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
width: 100
|
|
},
|
|
leftMargin: {
|
|
marginLeft: 10,
|
|
},
|
|
background: {
|
|
backgroundColor: '#222222'
|
|
},
|
|
sectionText: {
|
|
marginVertical: 6,
|
|
},
|
|
nestedText: {
|
|
marginLeft: 12,
|
|
marginTop: 20,
|
|
backgroundColor: 'transparent',
|
|
color: 'white'
|
|
},
|
|
resizeMode: {
|
|
width: 90,
|
|
height: 60,
|
|
borderWidth: 0.5,
|
|
borderColor: 'black'
|
|
},
|
|
resizeModeText: {
|
|
fontSize: 11,
|
|
marginBottom: 3,
|
|
},
|
|
icon: {
|
|
width: 15,
|
|
height: 15,
|
|
},
|
|
horizontal: {
|
|
flexDirection: 'row',
|
|
},
|
|
gif: {
|
|
flex: 1,
|
|
height: 200,
|
|
},
|
|
base64: {
|
|
flex: 1,
|
|
height: 50,
|
|
resizeMode: 'contain',
|
|
},
|
|
touchableText: {
|
|
fontWeight: '500',
|
|
color: 'blue',
|
|
},
|
|
});
|