javascript React Native ListView scrollToEnd不起作用

xxslljrj  于 2023-05-21  发布在  Java
关注(0)|答案(5)|浏览(188)

我使用ListView的scrollToEnd,但它不工作,但它适用于scrollTo。我该怎么处理它。

wlzqhblo

wlzqhblo1#

有一个解决方法,将其 Package 在setTimeout中,如下所示:

componentDidMount() {
  setTimeout(() => {
    this.refs.dateList.scrollToEnd();
  }, 50);
}
zxlwwiss

zxlwwiss2#

试试这个:

<ListView
    ref={ ( ref ) => this.scrollView = ref }
    onContentSizeChange={ () => {        
        this.scrollView.scrollToEnd( { animated: false } )
    } } >
</ListView>

文件

xn1cxnb4

xn1cxnb43#

渲染需要时间,所以在滚动到结束之前setTimeout()将起作用。但是,您可以使用onLayout()方法。

export default MyComponent extends React.Component {
  constructor(props) {
    super(props)

    this.scrollToBottom = this.scrollToBottom.bind(this)
  }

  scrollToBottom() {
    this.refs.myView.scrollToEnd()
  }

  render() {
    return {
      <ListView
           onLayout={this.scrollToBottom}
           ref='myView'
           ...
      />
   }
 }

注意:ListView现在已弃用。

lokaqttq

lokaqttq4#

这个这个对我很有效.

<Content ref={c => (this.contentComponent = c)}>
....Any code
</Content >

这允许您使用scrollToPosition(0)函数,如

this.contentComponent._root.scrollToPosition(0);
9bfwbjaz

9bfwbjaz5#

对于函数组件,等效的方法是使用useEffect,如下所示:

useEffect(()=>{
    setTimeout(ref?.current.scrollToEnd());
},[yourArrayData])

注意,你可以不需要为setTimeout设置持续时间,这是因为JavaScript中的Macrotask,如果你想了解更多,可以使用https://javascript.info/event-loop

相关问题