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

Question

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

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

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

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

我发现您必须在 ScrollView 组件中创建一个 ref 并在该处实现一个使用此 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 中）。我想在Fab中做onPress()逻辑，但是如果我这样做，它需要的ScrollView是不可用的，因为它在父组件中。我的想法是可能将 ref 作为 prop 传递给 FloatingButton，但由于某些原因，这不起作用。

有人可以帮我吗？

Answer 1

请看我的点心码。希望对您有所帮助。

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

Answer 2

您可以让父级连接到 FloatingButton 的 onPress 函数或将 ref 直接传递给 FloatingButton。

export const Parent : FC<ParentProps> = props => {
    const scrollRef = useRef<ScrollView>();

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

    return (
        <View>
            <ScrollView ref={scrollRef}>
                {/* Your content here */}
            </ScrollView>
            <FloatingButton onPress={onFabPress} />
        </View>  
    );
}

export const FloatingButton : FC<FloatingButtonProps> = props => {
    const { onPress } = props;

    const onFabPress = () => {
        // Do whatever logic you need to
        // ...

        onPress();
    }

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

Answer 3

您应该确定要滚动到的水平值或垂直值，就像这个代码片段一样。

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

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

React Native Scrollview: scroll to top on button click

react-native

native-base