探索React Native的极致列表视图：react-native-ultimate-listview

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import UltimateListView from 'react-native-ultimate-listview'; // 导入UltimateListView组件
 
export default class MyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [], // 初始数据数组
      page: 1, // 当前页数
      max_page: 10, // 最大页数
    };
  }
 
  // 模拟从API获取数据的函数
  fetchData = () => {
    const { page, max_page } = this.state;
    if (page <= max_page) {
      // 这里应该是API请求获取数据的代码
      const newData = []; // 假设获取到的新数据
      this.setState({
        data: [...this.state.data, ...newData], // 更新数据到state
        page: page + 1, // 页数增加
      });
    }
  };
 
  renderRow = (item, rowId) => {
    // 渲染每一行，这里简单返回一个文本元素
    return <Text key={rowId}>{item}</Text>;
  };
 
  render() {
    return (
      <View style={styles.container}>
        <UltimateListView
          data={this.state.data} // 数据源
          renderRow={this.renderRow} // 每行的渲染函数
          refreshOnScroll={true} // 是否在滚动时刷新
          onLoadMore={this.fetchData} // 当滚动到底部时触发的函数
          pagination={true} // 是否启用分页
          page={this.state.page} // 当前页数
          max_page={this.state.max_page} // 最大页数
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

这个代码示例展示了如何使用react-native-ultimate-listview组件创建一个简单的列表视图。它模拟了从API获取数据的过程，并在列表滚动到底部时加载更多数据。这个例子是学习如何在React Native中实现无限滚动列表的入门级示例。