mirror of
https://github.com/status-im/react-native.git
synced 2025-01-09 17:15:54 +00:00
9c73e2ff7a
Summary: Update to https://github.com/facebook/react-native/pull/1969 -- Recent improvements allow RCTImageLoader to select a more appropriate sized image based on the layout dimensions. Sizes: - asset.thumbnail - asset.aspectRatioThumbnail - asset.defaultRepresentation.fullScreenImage - asset.defaultRepresentation.fullResolutionImage Prior, only the fullResolutionImage was used. This was memory intensive and resulted in crashes when loading several large images at once. The updated implementation works well, but can be made more efficient: Consider loading 10 8MP (3264x2448) images in 150x150 pixel containers. The target size (150x150) is larger than asset.thumbnail (approx 100x100), therefore the fullScreenImage representation is used instead (approx 1334x1000). This commit will scale the asset to the minimum size required while taking into account original aspect ratio and device scale. Memory usage is considerably lower and many more images can be loaded in sequence without having to worry Closes https://github.com/facebook/react-native/pull/2008 Github Author: Adam Roth <adamjroth@gmail.com>
99 lines
2.3 KiB
JavaScript
99 lines
2.3 KiB
JavaScript
/**
|
|
* 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-native');
|
|
var {
|
|
Image,
|
|
StyleSheet,
|
|
View,
|
|
ScrollView
|
|
} = React;
|
|
|
|
var AssetScaledImageExample = React.createClass({
|
|
|
|
getInitialState() {
|
|
return {
|
|
asset: this.props.asset
|
|
};
|
|
},
|
|
|
|
render() {
|
|
var image = this.state.asset.node.image;
|
|
return (
|
|
<ScrollView>
|
|
<View style={styles.row}>
|
|
<Image source={image} style={styles.imageWide}/>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<Image source={image} style={styles.imageThumb}/>
|
|
<Image source={image} style={styles.imageThumb}/>
|
|
<Image source={image} style={styles.imageThumb}/>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<Image source={image} style={styles.imageT1}/>
|
|
<Image source={image} style={styles.imageT2}/>
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
},
|
|
});
|
|
|
|
var styles = StyleSheet.create({
|
|
row: {
|
|
padding: 5,
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignSelf: 'center',
|
|
},
|
|
textColumn: {
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
},
|
|
imageWide: {
|
|
borderWidth: 1,
|
|
borderColor: 'black',
|
|
width: 320,
|
|
height: 240,
|
|
margin: 5,
|
|
},
|
|
imageThumb: {
|
|
borderWidth: 1,
|
|
borderColor: 'black',
|
|
width: 100,
|
|
height: 100,
|
|
margin: 5,
|
|
},
|
|
imageT1: {
|
|
borderWidth: 1,
|
|
borderColor: 'black',
|
|
width: 212,
|
|
height: 320,
|
|
margin: 5,
|
|
},
|
|
imageT2: {
|
|
borderWidth: 1,
|
|
borderColor: 'black',
|
|
width: 100,
|
|
height: 320,
|
|
margin: 5,
|
|
},
|
|
});
|
|
|
|
exports.title = '<AssetScaledImageExample>';
|
|
exports.description = 'Example component that displays the automatic scaling capabilities of the <Image /> tag';
|
|
module.exports = AssetScaledImageExample;
|