Question

有没有办法滚动到ScrollView的顶部以响应按下按钮？

我可以强制整个页面的重新render，但这似乎非常低效。

Answer 1

首先向ref组件添加ScrollView属性。示例：<ScrollView ref='_scrollView'>
然后，只要您想要滚动到顶部，请执行以下示例：onPress={() => { this.refs._scrollView.scrollTo(0); }}

Answer 2

你可以运行＆＃34; scrollTo＆＃34; ScrollView的方法。 Check out the source

您可以通过设置ref属性并使用this.refs来引用ScrollView组件，如下所述：https://facebook.github.io/react/docs/more-about-refs.html

Answer 3

一个简单的例子：

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

Answer 4

在功能组件中

import { useRef } from 'react';

const scrollRef = useRef(); 

const onPressTouch = () => {
        scrollRef.current?.scrollTo({
            y: 0,
            animated: true,
        });
 }


<ScrollView ref={scrollRef} > 
</ScrollView>


<TouchableOpacity
 onPress={onPressTouch}>
</TouchableOpacity>

Answer 5

scrollTo(x,y)现已弃用。现在最好将一个对象传递给scrollTo，如下所示：

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

Answer 6

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>
  );
};

Answer 7

简单示例->

 constructor(props) {
    super(props);
    this.state = {

    }

  this.listView1 = null
  this.listView2 = null
  this.listViewY = 0.0
  this.scrollInterval = null
}

async componentDidMount() {

  this.autoScroll()

}



autoScroll() {
    setTimeout(() => {
      this.scrollInterval = setInterval(() => {
        if (this.listView !== null) {
          this.listView.scrollTo({ y: this.listViewY + 1 })
          this.listViewY += 1
        }
      }, 50);
    }, 1000);
  }

_stopScoller = () => {
if (this.scrollInterval !== null) {
  clearInterval(this.scrollInterval)
}

}

render() {
return(
  <ScrollView style={styles.fullListScrollView} ref={ref => this.listView = ref} onScrollBeginDrag={this._stopScoller}>
 </ScrollView>
)
}

Answer 8

可以使用按钮来控制scrollveiw或listview到顶部。

首先，您可以在其中使用onScroll方法put事件来检测ListView或scrollView的event.nativeEvent.contentOffset.y，您可以设置一个状态来控制它s show or hide according to the y`。

然后，在页面上设置一个按钮，使用onPress方法和.scrollTo方法进行制作。

这是一个可以作为参考的实现： https://www.npmjs.com/package/react-native-scrolltotop

希望这有帮助

Answer 9

就这么简单。问题是使用scrollView，这对我来说很好：

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

Answer 10

<TouchableOpacity onPress={()=>this.scrollListReftop.scrollTo({x: 0, y: 200, animated: true})}>
            <Text>scroll up</Text>
          </TouchableOpacity>

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

滚动到ScrollView的顶部

10 个答案:

Hooks解决方案（在Typescript中）