Question

所以我有一个带有ScrollView的组件，其中包含许多元素，因此您必须向下滚动很长一段距离。

现在，页面底部应该有一个按钮，单击该按钮会将页面滚动回到顶部。

我已经在一个额外的组件中将按钮创建为FAB（浮动操作按钮）。

它集成在ScrollView所在的父组件中。

我发现，您必须在ref组件中创建一个ScrollView并在该处实现一个使用此ref的按钮才能使滚动工作。简化了，这是我到目前为止的内容：

imports ...
const ParentComponent: React.FC<Props> = () => {

  const scroll = React.createRef();

  return (
    <View>
      <ScrollView ref={scroll}>
        <SearchResult></SearchResult> // creates a very long list 
        <FloatingButton
          onPress={() => scroll.current.scrollTo(0)}></FloatingButton>
      </ScrollView>
    </View>
  );
};

export default ParentComponent;

如您所见，有FloatingButton方法的组件onPress()。

这里是实现：

import React, {useState} from 'react';
import {Container, Content, Button, Icon, Fab} from 'native-base';

const FloatingButton: React.FC<Props> = () => {

  return (
    <Fab
      position="bottomRight"
      onPress={(???}>
      <Icon name="arrow-round-up" />
    </Fab>
  );
};

export default FloatingButton;

现在是问题：我应该在哪里使用onPress()方法？因为如果我将其保留在父组件中，它将无法工作，因为它不直接位于Fab中（在FloatingButton中）。我想在onPress()中执行Fab逻辑，但是如果这样做，则所需的ScrollView不可用，因为它在父组件中。我的想法是将ref作为prop传递到FloatingButton中，但是由于某些原因，这没有用。

有人可以帮我吗？

Answer 1

您可以让父级挂接到FloatingButton的{{1}}函数中，也可以将onPress向下直接传递给ref。

FloatingButton

Answer 2

您应该确定要滚动到的水平或垂直值，例如此代码段。

onPress={()=> 
   this.scroll.current.scrollTo({ x:0, y:0 });
}

Answer 3

请查看我的小吃代码。希望对您有帮助。

https://snack.expo.io/@anurodhs2/restless-edamame

React Native Scrollview：滚动到顶部，单击按钮

3 个答案: