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

Question

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

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

Answer 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} /> 

Answer 2

  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 滚动视图，以便从底部开始呈现内容，用户必须向下滚动才能显示更多内容。这是聊天应用中常见的设计

Answer 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>

Answer 4

这个问题与这个问题非常相似，但并不完全相同，这就是为什么我会提供答案。

ScrollView 提供了一个ScrollTo()方法，允许您滚动到滚动视图中的 ax/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 滚动视图，以便从底部开始呈现内容，用户必须向下滚动才能显示更多内容。这是聊天应用中常见的设计