如何在 react-native 的 onPress 按钮上滚动底部？

Posted 2023-04-18

【中文标题】如何在 react-native 的 onPress 按钮上滚动底部？

【英文标题】：How can i scroll bottom on onPress of button in react-native?

【发布时间】：2018-07-29 13:00:12

【问题描述】：

我在简单屏幕上添加了按钮，并且我想在按下按钮时滚动底部。什么代码要添加到按钮 onPress？

render() 
 return (
  <ScrollView>
   this.yourComponents()
   <Button>Scroll To Bottom </Button>
  </ScrollView>
  )

【参考方案1】：

您可以使用ref 来做到这一点。

render() 
 return (
  <ScrollView ref=scrollView => this.scrollView = scrollView>
   this.yourComponents()
   <Button onPress=() => this.scrollView.scrollToEnd()>Scroll To Bottom </Button>
  </ScrollView>
  )

---

您也可以使用useRef 挂钩来执行此操作。

const scrollView = useRef();

const scrollView = useRef();

const onPress = () => 
  scrollView.current.scrollToEnd();


<Button onPress=onPress /> 

【参考方案2】：

这个问题和one 很相似，但又不完全一样，所以我会提供答案。

ScrollView 提供了一个ScrollTo() 方法，允许您滚动到滚动视图中的 x/y 位置。

let _scrollViewBottom

<ScrollView
    ref='_scrollView'
    onContentSizeChange=(contentWidth, contentHeight)=>
    _scrollViewBottom = contentHeight;
    >
</ScrollView>

然后像这样使用滚动视图的引用名称

this.refs._scrollView.scrollTo(_scrollViewBottom);

此外，如果您的目标是经常推送新数据并在滚动视图的末尾滚动，您可能想看看react-native-invertible-scroll-view。

InvertibleScrollView 是一个可以反转的 React Native 滚动视图，因此内容从底部开始呈现，用户必须向下滚动才能显示更多内容。这是聊天应用中常见的设计

【参考方案3】：

对于功能组件

<ScrollView
  ref=ref =>  scrollView = ref 
  onContentSizeChange=() => scrollView.scrollToEnd( animated: true )
>
  ...
</ScrollView>

对于类组件

<ScrollView
  ref=ref =>  this.scrollView = ref 
  onContentSizeCange=() => this.scrollView.scrollToEnd( animated: true )
>
  ...
</ScrollView>

【参考方案4】：

  let _scrollViewBottom
    
    <ScrollView
        ref=scrollViewRef
        onContentSizeChange=(contentWidth, contentHeight)=>
        _scrollViewBottom = contentHeight;
// this make move  your  scroll
        scrollViewRef.current.scrollTo(x:0,y:_scrollViewBottom ,animated:true);
        >
    </ScrollView>

此外，如果您的目标是频繁推送新数据并在滚动视图的末尾滚动，您可能想看看react-native-invertible-scroll-view。

InvertibleScrollView 是一个可以反转的 React Native 滚动视图，因此内容从底部开始呈现，用户必须向下滚动才能显示更多内容。这是聊天应用中常见的设计