react native之listview加下拉重新整理上拉分頁
阿新 • • 發佈:2018-11-03
直接上程式碼
var REQUEST_URL = 'xxxx&page='; import React, { Component } from 'react'; import { AppRegistry, Image, StyleSheet, Text, View, ListView, RefreshControl, } from 'react-native'; let page = 1; let data = []; export default class MyProject extends Component { constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; } componentDidMount(){ this.fetchData(); } fetchData() { fetch(REQUEST_URL+this.state.page) .then((response) => response.json()) .then((responseData) => { data=responseData.info.data; this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.info.data), loaded: true, }); }) .done(); } reloadWordData() { return new Promise((resolve) => { setTimeout(()=>{resolve()}, 2000) }); } render() { if (!this.state.loaded) { return this.renderLoadingView(); } return ( <ListView refreshControl={ <RefreshControl refreshing={false} onRefresh={this.reloadWordData.bind(this)} />} dataSource={this.state.dataSource} renderRow={this.renderMovie} style={styles.listView} onEndReached={this.onEndReached.bind(this)} onEndReachedThreshold = { 100 } /> ); } onEndReached() { this.loadMore(); } loadMore() { page=page+1; fetch(REQUEST_URL+page) .then((response) => response.json()) .then((responseData) => { data = data.slice().concat(responseData.info.data); this.setState({ dataSource: this.state.dataSource.cloneWithRows(data), loaded: true, }); }) .done(); } renderLoadingView() { return (<View style={styles.container} > <Text>Loading ......</Text> </View> ); } renderMovie(movie) { return ( <View style={styles.container}> <Image source={{uri: movie.image}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles._create_time}>{movie._create_time}</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', marginBottom: 10, }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, thumbnail: { width: 81, height: 53, marginLeft:30, }, rightContainer: { flex: 1, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, _create_time: { textAlign: 'center', }, listView: { paddingTop: 20, backgroundColor: '#F5FCFF', }, }); AppRegistry.registerComponent('testrn', () => MyProject);