mirror of
https://github.com/status-im/react-native.git
synced 2025-01-15 03:56:03 +00:00
52d8851fc8
Summary: In the context of an app an image exists in three resolutions on the server: `thumb` (30px) `feed` (300px) `full` (900px). When looking at an individual item a user can come either from the feed, via a permalink or from other parts of the app. This allows a situation where the `feed` image might or might not already be loaded somewhere in the app. In the detail view I want to render `thumb` with a blur (to quickly display something), then the `feed` image if it exists to have something decent to display until `full` loads. However it is quite a waste to load the `feed` image if it isn't already in cache, and will slow down the time until `full` is loaded. It is possible to track the navigation from feed->detail and that the `feed` image has actually completed loading by the feed component however as component hierarchies grow this turns into quite a lot of prop passing and bad separation of concerns. NSURLRequests accepts a [Cache Policy](https://developer.apple.com/reference/fo Closes https://github.com/facebook/react-native/pull/10844 Differential Revision: D4425959 Pulled By: lacker fbshipit-source-id: 679835439c761a2fc894f56eb6d744c036cf0b49
104 lines
2.4 KiB
JavaScript
104 lines
2.4 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-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.
|
|
*
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var React = require('react');
|
|
var ReactNative = require('react-native');
|
|
var {
|
|
AppRegistry,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} = ReactNative;
|
|
|
|
// Keep this list in sync with UIExplorerIntegrationTests.m
|
|
var TESTS = [
|
|
require('./IntegrationTestHarnessTest'),
|
|
require('./TimersTest'),
|
|
require('./AsyncStorageTest'),
|
|
require('./LayoutEventsTest'),
|
|
require('./AppEventsTest'),
|
|
require('./SimpleSnapshotTest'),
|
|
require('./ImageCachePolicyTest'),
|
|
require('./ImageSnapshotTest'),
|
|
require('./PromiseTest'),
|
|
require('./WebSocketTest'),
|
|
];
|
|
|
|
TESTS.forEach(
|
|
(test) => AppRegistry.registerComponent(test.displayName, () => test)
|
|
);
|
|
|
|
// Modules required for integration tests
|
|
require('LoggingTestModule');
|
|
|
|
type Test = any;
|
|
|
|
class IntegrationTestsApp extends React.Component {
|
|
state = {
|
|
test: (null: ?Test),
|
|
};
|
|
|
|
render() {
|
|
if (this.state.test) {
|
|
return (
|
|
<ScrollView>
|
|
<this.state.test />
|
|
</ScrollView>
|
|
);
|
|
}
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.row}>
|
|
Click on a test to run it in this shell for easier debugging and
|
|
development. Run all tests in the testing environment with cmd+U in
|
|
Xcode.
|
|
</Text>
|
|
<View style={styles.separator} />
|
|
<ScrollView>
|
|
{TESTS.map((test) => [
|
|
<TouchableOpacity
|
|
onPress={() => this.setState({test})}
|
|
style={styles.row}>
|
|
<Text style={styles.testName}>
|
|
{test.displayName}
|
|
</Text>
|
|
</TouchableOpacity>,
|
|
<View style={styles.separator} />
|
|
])}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
var styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: 'white',
|
|
marginTop: 40,
|
|
margin: 15,
|
|
},
|
|
row: {
|
|
padding: 10,
|
|
},
|
|
testName: {
|
|
fontWeight: '500',
|
|
},
|
|
separator: {
|
|
height: 1,
|
|
backgroundColor: '#bbbbbb',
|
|
},
|
|
});
|
|
|
|
AppRegistry.registerComponent('IntegrationTestsApp', () => IntegrationTestsApp);
|