我有一个包含许多元素的组件,使用了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
中,但出于某些原因,这种方法没有奏效。请问有人可以帮帮我吗?