ネイティブVirtualizedListに反応するスクロールしてスクロールして位置に移動

Question

RN 49.3にあります。 スクロール位置または仮想インデックスに表示されているアイテムのインデックスを取得する方法を探しています！

PS：私たちは異なるアプローチを使用していたprops.onScrollEndDrag & props.onScroll

Answer 1

を持っているようだVirtualizedList.jsのソースコードをオープンしました。それ以来ずっと変わってきましたが、私は最初のアプローチでお手伝いできます。リストにonScrool paramを追加しました。私たちはevent.nativeEvent.contentOffset.yを州または内部のある変数に取り込みました。私たちは還元剤を使いました。ユーザーが画面を離れると、この値がデータベースに保存されました。 2番目の部分は、componentDidMountのdbからこの値をロードすることでした。あなただけのリストコンポーネントにrefを入れた後、私は

componentDidMount() { 
    AsyncStorage.getItem(key) 
     .then(y => { 
      this.refs.myRef.scrollTo({ x: 0, y, animated: false }); 
     }); 
} 

ベストアプローチを実装した後this.refs.myRef.scrollTo({ x: 0, y: loadedValue, animated: false });

スクロールキャプチャ

render() { 
     return (
     <VirtualizedList 
      ref='myRef' 
      onScroll={event => { 
       this.scroll = event.nativeEvent.contentOffset.y; 
      }} 
      ... 
     /> 
    );} 

終了時に保存

componentWillUnmount() { 
    AsyncStorage.setItem(key, this.scroll); 
} 

ロードを呼び出しますそれをreduxの中で処理し、このcompを接続することだと思います店のリストと一緒に行きました。後で使用するための位置を保存するので、dbに保存することに言及しました。これはオプションであり、要件によって異なります。 この状態を使用することもできますが、不要な更新を処理する必要があります