43

フラットリストの一番上までスクロールするのに苦労しているので、助けていただければ幸いです。

基本的に、firebase から最初の 5 項目を取得し、onEndReached が呼び出されると、次の 5 項目をリストに追加します。

data: [...this.state.data, ...results]

今のところ、ビューの上部に次のことを行う更新ボタンがあります。

this.flatListRef.scrollToOffset({ animated: true, y: 0 });

最初の 5 つの項目がレンダリングされたときにこれをクリックすると、期待どおりにリストの一番上までスクロールします。この問題は、リストが追加された後にのみ発生します (アイテムが表示されていないと思いますか?)。

「ScrollToItem」も試しましたが、React Native docs の次の理由により、これは機能しないと思います。

注: getItemLayout prop を指定しないと、レンダリング ウィンドウの外側の場所にスクロールすることはできません。

誰が何が起こっているのか説明したり、私が間違っていることを知ったりできますか?

前もって感謝します！

getItemLayout: (これが何をするのか、長さやオフセットなどをどのように計算するのか完全にはわかりません)

getItemLayout = (data, index) => (
{ length: 50, offset: 50 * index, index }
)

return (
  <View>
    <FlatList
      ref={(ref) => { this.flatListRef = ref; }}
      onScroll={this.handleScroll}
      data={this.state.data}
      keyExtractor={item => item.key}
      ListFooterComponent={this.renderFooter()}
      onRefresh={this.handleRefresh}
      refreshing={this.state.newRefresh}
      onEndReached={this.handleEndRefresh}
      onEndReachedThreshold={0.05}
      getItemLayout={this.getItemLayout}
      renderItem={this.renderItem}
    />
    {this.state.refreshAvailable ? this.renderRefreshButton() : null}
  </View>
);
4

4 に答える 4

33

フックを使用してこれを行う方法がわからなくなった場合に備えて、ここに例を示します

function MyComponent() {
    const flatListRef = React.useRef()

    const toTop = () => {
        // use current
        flatListRef.current.scrollToOffset({ animated: true, offset: 0 })
    }

    return (    
        <FlatList
            ref={flatListRef}
            data={...}
            ...
        />
    )
}

主な違いは、次の方法でアクセスすることです。.current

于 2019-10-24T23:24:16.363 に答える