android - ReactNative怎样实现图片缓存？或者有无现成的组件呢？

使用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,
}

};

巴扎黑2772日前622

android - ReactNative怎样实现图片缓存？或者有无现成的组件呢？

全員に返信(1)返信します