在“Flatlist”中追加数据，无需在本机反应中刷新完整的“Flatlist”

Question

FlatListlistview带有在到达末尾时从 API 获取下一组数据的选项，我们还可以使用该scrollTo函数来保留最后的滚动位置，Flatlist但实现这种方式会在每个下一个分页数据请求上创建重新加载，从而FlatList完成listview加载和我们滚动到最后一个左侧位置。无论如何，如果我们可以实现一个功能，即Flatlist不刷新现有数据，仅将新数据附加到底部而不改变反应本机中的滚动位置，将有助于FlastList以更优化的方式呈现。任何有关建议的帮助将不胜感激。

Answer 1

分页示例：-

class FidsListview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      studentData: [],
      currentPage: 0,
      lastPage: 0,
    };

    this.getChildrenApi = this.getChildrenApi.bind(this);
  }

  componentDidMount() {
    this.getChildrenApi();
  }

  getChildrenApi() {
    let currentPage = this.state.currentPage + 20;
    fetch(
      `https://fids.myairports.com.my/api/flights/get-flight-departures-cache?skip=${currentPage}&take=${
        currentPage + 20
      }&terminal=KLIA`
    )
      .then((result) => result.json())
      .then((res) => {
        if (
          res.flightStatuses != null &&
          res.flightStatuses != undefined &&
          res.flightStatuses.length > 0
        ) {
          this.setState({
            studentData: res.flightStatuses,
          });
        } else {
          this.setState({ studentData: [] });
        }
      });
  }

  lodeMoreData() {
    let nextPage = this.state.currentPage + 20;

    fetch(
      `http://paginationapi.com?skip=${nextPage}&take=${
        nextPage + 20
      }&terminal=KLIA`
    )
      .then((result) => result.json())
      .then((res) => {
        if (
          res.flightStatuses != null &&
          res.flightStatuses != undefined &&
          res.flightStatuses.length > 0
        ) {
          this.setState({
            studentData: [...this.state.studentData, ...res.flightStatuses],
            currentPage: nextPage,
          });
        } else {
          this.setState({ studentData: [] });
        }
      });
  }

  render() {
    return (
      <View style={{}}>
        <FlatList
          style={{ backgroundColor: "#FFF" }}
          showsVerticalScrollIndicator={false}
          data={this.state.studentData}
          numColumns={3}
          ListFooterComponent={() => <View style={{ marginBottom: 300 }} />}
          extraData={this.state.studentData}
          renderItem={({ item, index }) => (
            <View style={{ height: 100, backgroundColor: "#EEE" }}>
              <Text>{item.afsKey}</Text>
            </View>
          )}
         
        />
        {this.state.isLoading && (
          <View
            style={{
              width: "100%",
              height: "100%",
              alignItems: "center",
              justifyContent: "center",
              position: "absolute",
            }}
          >
            <ActivityIndicator size="large" color={"white"} />
          </View>
        )}
      </View>
    );
  }
}

export def

ault FidsListview；