先看下效果图
一个横向滚动的listview,footer经过定制,结合onScroll事件,当滚动超过一定范围提示释放即页面跳转。
代码如下
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Dimensions,
Image,
} from 'react-native';
// var dataArray = ["page one", "page two","page three","page four","page five","page six",];
var dataArray = ['page 1', 'page 2', 'page 3'];
var Screen_Width = Dimensions.get('window').width;
var Screen_Height = Dimensions.get('window').height;
const t1 = '滑动查看更多';
const t2 = '释放查看更多';
import image1 from '../../images/icon_back.png';
import image2 from '../../images/icon_go.png';
class LoadMoreFooter extends Component {
render() {
return (
<View style={styles.footer}>
<Image style={styles.footerImg} source={this.props.img}/>
<View style={styles.footerTextCont}>
<Text style={styles.footerText}>{this.props.tips}</Text>
</View>
</View>
);
}
}
export default class ListViewDemo extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
var ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 != row2,
});
this.state = {
dataSource: ds.cloneWithRows(dataArray),
img: image1,
tips: t1,
};
}
_renderFooter() {
return <LoadMoreFooter img={this.state.img} tips={this.state.tips}/>
}
_toEnd() {
}
render() {
return (
<ListView
ref={(listView) => {
this._listView = listView
}}
style={styles.container}
dataSource={this.state.dataSource}
renderRow={this._renderRow}
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
onScroll={(event) => {
this._scroll(event);
}}
enableEmptySections={true}
renderFooter={ this._renderFooter.bind(this) }
onEndReached={ this._toEnd.bind(this) }
onEndReachedThreshold={-1}
>
</ListView>
);
}
_renderRow(rowData) {
return (
<View style={styles.cellStyle}>
<Text style={styles.textStyle}>
{rowData}
</Text>
</View>
);
}
_scroll(event) {
var scrollView = event.nativeEvent;
var x = scrollView.contentOffset.x;
var SVNWidth = scrollView.layoutMeasurement.width;
var contentSize = scrollView.contentSize.width;
console.log(x + ", " + SVNWidth + ", " + contentSize);
if (x > 0 && x + SVNWidth > contentSize + 20) {
this.setState({
img: image2,
tips: t2,
});
setTimeout(function () {
}, 1000);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
height: 200,
marginTop: 20,
},
cellStyle: {
flex: 1,
width: Screen_Width / 2,
height: 200,
justifyContent: 'center',
alignItems: 'center',
marginLeft: 10,
backgroundColor: 'red',
},
textStyle: {
fontSize: 25,
color: 'yellow',
},
footer: {
paddingLeft: 5,
paddingRight: 5,
width: 50,
height: 200,
backgroundColor: 'yellow',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
footerImg: {
width: 20,
height: 20,
},
footerTextCont: {
height: 100,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
footerText: {
flexWrap: 'wrap',
width: 20,
flex: 1,
},
});