useScrollToTop

スクロールコンポーネントのネイティブの動作では、ネイティブのタブバーで予想されるように、アクティブタブをタップしたときに最上部にスクロールするナビゲーションのイベントに応答します。

これを達成するために、スクロールコンポーネント（例えば ScrollView または FlatList）への参照を受け付ける useScrollToTop をエクスポートします。

例

import * as React from 'react';
import { ScrollView } from 'react-native';
import { useScrollToTop } from '@react-navigation/native';

function Albums() {
  const ref = React.useRef(null);

  useScrollToTop(ref);

  return <ScrollView ref={ref}>{/* content */}</ScrollView>;
}

クラスコンポーネントでの使用

クラスコンポーネントを関数のコンポーネントでラップしてフックを使用できます

class Albums extends React.Component {
  render() {
    return <ScrollView ref={this.props.scrollRef}>{/* content */}</ScrollView>;
  }
}

// Wrap and export
export default function (props) {
  const ref = React.useRef(null);

  useScrollToTop(ref);

  return <Albums {...props} scrollRef={ref} />;
}

スクロールオフセットの提供

スクロール位置のオフセットが必要な場合は、渡された参照をラップして装飾できます

import * as React from 'react';
import { ScrollView } from 'react-native';
import { useScrollToTop } from '@react-navigation/native';

function Albums() {
  const ref = React.useRef(null);

  useScrollToTop(
    React.useRef({
      scrollToTop: () => ref.current?.scrollTo({ y: 100 }),
    })
  );

  return <ScrollView ref={ref}>{/* content */}</ScrollView>;
}