Прокрутка вверх до ScrollView

Ответ 1

Вы можете запустить метод scrollTo ScrollView. Проверьте источник.

Вы можете получить ссылку на компонент ScrollView, установив свойство ref и используя this.refs, как описано здесь: https://facebook.github.io/react/docs/more-about-refs.html

Ответ 2

• Сначала добавьте атрибут ref к вашему компоненту ScrollView. Пример: <ScrollView ref='_scrollView'>
• Затем, где вы хотите прокрутить вверх, выполните следующие действия: onPress={() => { this.refs._scrollView.scrollTo(0); }}

Ответ 3

Простой пример:

<ListView
  ref={ref => this.listView = ref}
  onContentSizeChange={() => {
    this.listView.scrollTo({y: 0})
  }}
/>

Ответ 4

scrollTo(x,y) теперь устарел. Теперь лучше всего передать объект для прокрутки. Вот так:

this.refs.scrollView.scrollTo({x: 0, y: 0, animated: true})

Ответ 5

Просто к делу. Вопрос был для scrollView, и у меня это работало нормально:

<ScrollView
  ref='_scrollView'
  onContentSizeChange={() => { this.refs._scrollView.scrollTo({x: 0, y: 0, animated: true}); }}
 >

Ответ 6

& Lt; ScrollView ref = {(ref) => {this.scrollListReftop = ref; }}>

& Lt;/ScrollView>

//напишите это, чтобы получить прокрутку сверху

this.scrollListReftop.scrollTo({x: 0, y: 0, animated: true})

Ответ 7

Возможна кнопка для управления scrollveiw или списком сверху.

во-первых, вы можете использовать в нем событие onScroll метода put для обнаружения event.nativeEvent.contentOffset.y ListView или scrollView, вы можете установить состояние для управления им s show or hide according to the y`.

Затем установите кнопку на своей странице, используйте метод onPress и .scrollTo, чтобы сделать это.

Вот реализация может использоваться как ссылка: https://www.npmjs.com/package/react-native-scrolltotop

Надеясь, что это поможет

Ответ 8

Решение Hooks (в Typescript)

Немного сложный, но может быть полезен для всех, кто использует функциональные компоненты вместо классов.

ImperativeScrollView.tsx:

import React, {
  useRef,
  useImperativeHandle,
  forwardRef,
  RefForwardingComponent,
  PropsWithChildren,
} from "react";
import { ScrollView, ScrollViewProps } from "react-native";

export interface ImperativeScrollViewHandles {
  scrollToStart(options?: { animated: boolean }): void;
  scrollToEnd(options?: { animated: boolean }): void;
  scrollTo(options: { x?: number; y?: number; animated?: boolean }): void;
}

const ImperativeScrollView: RefForwardingComponent<
  ImperativeScrollViewHandles,
  PropsWithChildren<ScrollViewProps>
> = (props, ref) => {
  const scrollViewRef = useRef<ScrollView>(null);
  useImperativeHandle(ref, () => ({
    scrollToStart: options => {
      if (scrollViewRef.current) {
        scrollViewRef.current.scrollTo({
          x: 0,
          y: 0,
          animated: options ? options.animated : true,
        });
      }
    },
    scrollToEnd: options => {
      if (scrollViewRef.current) {
        scrollViewRef.current.scrollToEnd(options);
      }
    },
    scrollTo: options => {
      if (scrollViewRef.current) {
        scrollViewRef.current.scrollTo(options);
      }
    },
  }));
  return <ScrollView ref={scrollViewRef} {...props} />;
};

export default forwardRef(ImperativeScrollView);

Использование:

const MyComponent: React.FC<MyComponentProps> = props => {
  const scrollViewRef = useRef<ImperativeScrollViewHandles>(null);
  return (
    <ImperativeScrollView ref={scrollViewRef}>
      <Button
        title={"Tap me!"}
        onPress={() => {
          if (scrollViewRef.current) {
            scrollViewRef.current.scrollToStart();
          }
        }}
      />
    </ImperativeScrollView>
  );
};