使用react-native开发安卓程序时，需要从网络加载图片并显示在列表，测试发现不断刷新后，内存很快撑爆了，应用卡的不行。原因是因为每次刷新都会加载图片到内存，ReactNative中有没有图片缓存的组件呢？
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
TouchableHighlight,
Platform,
Alert,
Image
} = React;
var GiftedListView = require('react-native-gifted-listview');
var GiftedSpinner = require('react-native-gifted-spinner');
var DATA = require('../mock/SubjectMockData');
/**
专题页
*/
var Subject = React.createClass({
/**
* Will be called when refreshing
* Should be replaced by your own logic
* @param {number} page Requested page to fetch
* @param {function} callback Should pass the rows
* @param {object} options Inform if first load
*/
_onFetch(page, callback, options) {
setTimeout(() => {
var rows = JSON.parse(DATA);
callback(rows, {
allLoaded: true // the end of the list is reached
});
}, 2000); // simulating network fetching
},
/**
* When a row is touched
* @param {object} rowData Row data
*/
_onPress(rowData) {
console.log(rowData + ' pressed');
},
/**
* Render a row
* @param {object} rowData Row data
*/
_renderRowView(rowData) {
var imgUrl = "http:" + rowData.img;
return (
<TouchableHighlight
style={customStyles.row}
underlayColor='#c8c7cc'
onPress={() => this._onPress(rowData)}>
<Image
style={{flex: 1, borderRadius: 5}}
source={{uri: imgUrl}}
resizeMode="stretch"/>
</TouchableHighlight>
);
},
/**
* Render a row
* @param {object} rowData Row data
*/
_renderSectionHeaderView(sectionData, sectionID) {
return null;
},
/**
* Render the refreshable view when waiting for refresh
* On Android, the view should be touchable to trigger the refreshCallback
* @param {function} refreshCallback The function to call to refresh the listview
*/
_renderRefreshableWaitingView(refreshCallback) {
if (Platform.OS !== 'android') {
return (
<View style={customStyles.refreshableView}>
<Text style={customStyles.actionsLabel}>
↓
</Text>
</View>
);
} else {
return (
<TouchableHighlight
underlayColor='#c8c7cc'
onPress={refreshCallback}
style={customStyles.refreshableView}>
<Text style={customStyles.actionsLabel}>
↻
</Text>
</TouchableHighlight>
);
}
},
/**
* Render the refreshable view when the pull to refresh has been activated
* @platform ios
*/
_renderRefreshableWillRefreshView() {
return (
<View style={customStyles.refreshableView}>
<Text style={customStyles.actionsLabel}>
↻
</Text>
</View>
);
},
/**
* Render the refreshable view when fetching
*/
_renderRefreshableFetchingView() {
return (
<View style={customStyles.refreshableView}>
<GiftedSpinner />
</View>
);
},
/**
* Render the pagination view when waiting for touch
* @param {function} paginateCallback The function to call to load more rows
*/
_renderPaginationWaitingView(paginateCallback) {
return (
<TouchableHighlight
underlayColor='#c8c7cc'
onPress={paginateCallback}
style={customStyles.paginationView}>
<Text style={[customStyles.actionsLabel, {fontSize: 13}]}>
Load more
</Text>
</TouchableHighlight>
);
},
/**
* Render the pagination view when fetching
*/
_renderPaginationFetchigView() {
return (
<View style={customStyles.paginationView}>
<GiftedSpinner />
</View>
);
},
/**
* Render the pagination view when end of list is reached
*/
_renderPaginationAllLoadedView() {
return null;
},
/**
* Render a view when there is no row to display at the first fetch
* @param {function} refreshCallback The function to call to refresh the listview
*/
_renderEmptyView(refreshCallback) {
return (
<View style={customStyles.defaultView}>
<Text style={customStyles.defaultViewTitle}>
Sorry, there is no content to display...
</Text>
<TouchableHighlight
underlayColor='#c8c7cc'
onPress={refreshCallback}>
<Text>
↻
</Text>
</TouchableHighlight>
</View>
);
},
/**
* Render a separator between rows
*/
_renderSeparatorView() {
return null;
},
render() {
return (
<View style={screenStyles.container}>
<GiftedListView
rowView={this._renderRowView}
onFetch={this._onFetch}
initialListSize={10} // the maximum number of rows displayable without scrolling (height of the listview / height of row)
firstLoader={true} // display a loader for the first fetching
pagination={false} // enable infinite scrolling using touch to load more
paginationFetchigView={this._renderPaginationFetchigView}
paginationAllLoadedView={this._renderPaginationAllLoadedView}
paginationWaitingView={this._renderPaginationWaitingView}
refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
refreshableViewHeight={50} // correct height is mandatory
refreshableDistance={40} // the distance to trigger the pull-to-refresh - better to have it lower than refreshableViewHeight
refreshableFetchingView={this._renderRefreshableFetchingView}
refreshableWillRefreshView={this._renderRefreshableWillRefreshView}
refreshableWaitingView={this._renderRefreshableWaitingView}
emptyView={this._renderEmptyView}
renderSeparator={this._renderSeparatorView}
withSections={false} // enable sections
sectionHeaderView={this._renderSectionHeaderView}
PullToRefreshViewAndroidProps={{
colors: ['#fff'],
progressBackgroundColor: '#003e82',
}}
/>
</View>
);
}});
var customStyles = {
separator: {
height: 1,
backgroundColor: '#CCC'
},
refreshableView: {
height: 50,
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
},
actionsLabel: {
fontSize: 20,
color: '#007aff',
},
paginationView: {
height: 44,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFF',
},
defaultView: {
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
defaultViewTitle: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 15,
},
row: {
height: 200,
backgroundColor: 'skyblue',
borderRadius: 5,
marginTop: 10,
marginLeft: 10,
marginRight: 10,
},
header: {
backgroundColor: '#50a4ff',
padding: 10,
},
headerTitle: {
color: '#fff',
},};
var screenStyles = {
container: {
flex: 1,
backgroundColor: '#FFF',
},
navBar: {
height: 64,
backgroundColor: '#007aff',
justifyContent: 'center',
alignItems: 'center',
},
navBarTitle: {
color: '#fff',
fontSize: 16,
marginTop: 12,
}};
