本文共 3667 字,大约阅读时间需要 12 分钟。
在React Native中的懒加载(lazyload)一直是个大问题,官方没有提供支持,而且React的结构也不利于实现这个功能
经过很长一段时间的挣扎与尝试之后终于完成了一款性能不错且使用较为简单的组件:
http://bbs.reactnative.cn/topic/407/react-native-lazyload
npm install react-native-lazyload
import { LazyloadScrollView, LazyloadListView, LazyloadView, LazyloadImage} from 'react-native-lazyload';
LazyloadScrollView
替换需要实现懒加载的 ScrollView
,LazyloadListView
替换 ListView
LazyloadView
替换需要被懒加载的View
,LazyloadImage
替换Image
LazyloadScrollView
,LazyloadListView
的用法与ScrollView
,ListView
完全一样
LazyloadScrollView
或LazyloadListView
添加 name 属性,并给LazyloadView
, LazyloadImage
添加与之对应的host属性LazyloadView
, LazyloadImage
需要在 LazyloadScrollView
或LazyloadListView
内,并指定与之 name 属性相同的 host属性才能使懒加载生效,因为React不能实现元素的遍历,需要通过指定这两个属性建立懒元素与滚动元素之间的对应关系一段简单的示意代码如下:
...其他元素 懒加载的内容
注意LazyloadScrollView的name属性与LazyloadView和LazyloadImage的host属性的对应关系
下面这个例子可以在有完整的代码
import React, { AppRegistry, Component, StyleSheet, Text, View, ListView} from 'react-native';import { LazyloadListView, LazyloadView} from 'react-native-lazyload';import data from './MOCK_DATA.json';class LazyloadListExample extends Component { constructor() { super(...arguments); let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(data) }; } renderRow = (file) => { return; }; render() { return ( {file.id} {file.first_name} {file.last_name} email: {file.email} last visit ip: {file.ip_address}{file.gender} ); }}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF' }, content: { paddingTop: 20, justifyContent: 'center', alignItems: 'center' }, view: { height: 70, width: 320, paddingVertical: 5, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#666' }, file: { width: 320, flex: 1, flexDirection: 'row' }, id: { width: 50, alignItems: 'center', justifyContent: 'center' }, idText: { fontSize: 10 }, detail: { justifyContent: 'space-around', flex: 1 }, name: { textAlign: 'center', lineHeight: 15, color: '#666', marginBottom: 5 }, email: { fontSize: 10, color: 'blue', textDecorationColor: 'blue', textDecorationLine: 'underline', textDecorationStyle: 'solid' }, ip: { fontSize: 12, color: 'grey' }, gender: { width: 50, alignItems: 'center', justifyContent: 'center' }, genderText: { fontSize: 10 }, title: { color: '#333', fontSize: 12 }, male: { color: 'skyblue' }, female: { color: 'pink' }});export default LazyloadListExample;
转载地址:http://iyeni.baihongyu.com/