直接上代码
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),}); }) .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,_create_time: { textAlign: 'center',listView: { paddingTop: 20,}); AppRegistry.registerComponent('testrn',() => MyProject);