mirror of
https://github.com/status-im/react-native.git
synced 2025-03-03 19:00:37 +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>
87 lines
2.9 KiB
JavaScript
87 lines
2.9 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.
|
|
*
|
|
* @providesModule createExamplePage
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var React = require('react-native');
|
|
var ReactNative = require('ReactNative');
|
|
var UIExplorerBlock = require('./UIExplorerBlock');
|
|
var UIExplorerPage = require('./UIExplorerPage');
|
|
|
|
var invariant = require('invariant');
|
|
|
|
import type { Example, ExampleModule } from 'ExampleTypes';
|
|
|
|
var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
|
|
: ReactClass<any, any, any> {
|
|
invariant(!!exampleModule.examples, 'The module must have examples');
|
|
|
|
var ExamplePage = React.createClass({
|
|
statics: {
|
|
title: exampleModule.title,
|
|
description: exampleModule.description,
|
|
},
|
|
|
|
getBlock: function(example: Example, i) {
|
|
// Hack warning: This is a hack because the www UI explorer requires
|
|
// renderComponent to be called.
|
|
var originalRender = React.render;
|
|
var originalRenderComponent = React.renderComponent;
|
|
var originalIOSRender = ReactNative.render;
|
|
var originalIOSRenderComponent = ReactNative.renderComponent;
|
|
var renderedComponent;
|
|
// TODO remove typecasts when Flow bug #6560135 is fixed
|
|
// and workaround is removed from react-native.js
|
|
(React: Object).render =
|
|
(React: Object).renderComponent =
|
|
(ReactNative: Object).render =
|
|
(ReactNative: Object).renderComponent =
|
|
function(element, container) {
|
|
renderedComponent = element;
|
|
};
|
|
var result = example.render(null);
|
|
if (result) {
|
|
renderedComponent = result;
|
|
result.props.navigator = this.props.navigator;
|
|
}
|
|
(React: Object).render = originalRender;
|
|
(React: Object).renderComponent = originalRenderComponent;
|
|
(ReactNative: Object).render = originalIOSRender;
|
|
(ReactNative: Object).renderComponent = originalIOSRenderComponent;
|
|
return (
|
|
<UIExplorerBlock
|
|
key={i}
|
|
title={example.title}
|
|
description={example.description}>
|
|
{renderedComponent}
|
|
</UIExplorerBlock>
|
|
);
|
|
},
|
|
|
|
render: function() {
|
|
return (
|
|
<UIExplorerPage title={title}>
|
|
{exampleModule.examples.map(this.getBlock)}
|
|
</UIExplorerPage>
|
|
);
|
|
}
|
|
});
|
|
|
|
return ExamplePage;
|
|
};
|
|
|
|
module.exports = createExamplePage;
|