web-dev-qa-db-ja.com

React Nativeのフラットリストで遅延読み込みを適用する方法

反応ネイティブのFlatlistで遅延ロードを適用する最良の方法は何ですか。現在、フラットリストには無限のスクロールがあります。私はReact nativeに慣れていないので、何も考えていない。

javascriptreactjsreact-nativelazy-loadingreact-native-flatlist
10
elle kay

あなたが使用する必要があります

<FlatList ....
onEndReached={this.endReached}
onEndReachedThreshold={.7}
.../>

onEndReached：スクロール位置がレンダリングされたコンテンツのonEndReachedThreshold内に入ると1回呼び出されます。

およびonEndReachedThreshold：リストの下端からコンテンツの最後までの距離（リストの表示可能な長さの単位）は、onEndReachedコールバックをトリガーするために必要です。したがって、0.5の値は、コンテンツの終わりがリストの表示可能な長さの半分以内にあるときにonEndReachedをトリガーします。

例えば：

class YourClass extends Component {
  state = { list: [], offset: 0, limit: 100 };
  componentDidMount() {
      this.fetchResult();
  }
    fetchResult = () => {
        const { offset, limit, list } = this.state;
        fetchModeDateFromAPI(offset, limit).then(res => {
        if (!res.list) return;
        this.setState({
            list: list.concat(res.list),
            offset: offset + 100,
            limit: limit
        });
        });
    };
    render = () => {
        return (
        <FlatList
            style={{ flex: 1 }}
            extraData={this.state}
            onEndReached={this.fetchResult}
            onEndReachedThreshold={0.7}
            data={this.state.list}
            renderItem={rowData => {}}
            keyExtractor={item => item.id.toString()}
        />
        );
    };
}
8
Deivison Sporteman