[英]Press tab to scroll to top of flatlist
I would like to implement scrolling to top.我想实现滚动到顶部。 My tab is a flatlist, and when users scroll down the flatlist, they have to scroll back up.
我的标签是一个平面列表,当用户向下滚动平面列表时,他们必须向上滚动。 Instagram and Twitter allow you to press the tab to scroll back up, I am wondering how to implement it in my own app.
Instagram 和 Twitter 允许您按下选项卡向上滚动,我想知道如何在我自己的应用程序中实现它。
Here is the tab I want to implement scrolling to top:这是我要实现滚动到顶部的选项卡:
//Bottom Tabs
function Tabs() {
...
<Tab.Screen
name="Home"
component={globalFeedStackView}
options={{
tabBarLabel: ' ',
tabBarIcon: ({ color, size }) => (
<Ionicons name="ios-home" size={size} color={color} />
),
}}
/>
}
And the class component for the tab above:以及上面选项卡的 class 组件:
class GlobalScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
globalPostsArray: [],
navigation: this.props.navigation,
};
}
async componentDidMount() {
this.getCollection()
Analytics.setUserId(Firebase.auth().currentUser.uid)
Analytics.setCurrentScreen("GlobalScreen")
}
...
render() {
return (
<View style={styles.view}>
<FlatList
data={this.state.globalPostsArray}
renderItem={renderItem}
keyExtractor={item => item.key}
contentContainerStyle={{ paddingBottom: 50 }}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
onRefresh={this._refresh}
refreshing={this.state.isLoading}
onEndReached={() => {this.getMore()}}
/>
<KeyboardSpacer />
</View>
)
}
According to react navigation I can do something like this:根据反应导航,我可以这样做:
import * as React from 'react';
import { ScrollView } from 'react-native';
import { useScrollToTop } from '@react-navigation/native';
class Albums extends React.Component {
render() {
return <ScrollView ref={this.props.scrollRef}>{/* content */}</ScrollView>;
}
}
// Wrap and export
export default function(props) {
const ref = React.useRef(null);
useScrollToTop(ref);
return <Albums {...props} scrollRef={ref} />;
}
But this solution is for a scrollview, and I am using a flatlist.但是这个解决方案是针对滚动视图的,我使用的是平面列表。
How can I implement pressing a tab to scroll to the top of my flatlist?如何实现按选项卡滚动到我的平面列表顶部?
you can do it the same way with a ref on your FlatList:您可以使用 FlatList 上的 ref 以相同的方式执行此操作:
import * as React from 'react';
import { FlatList } from 'react-native';
class Albums extends React.Component {
render() {
return <FlatList ref={this.props.scrollRef} />;
}
// Wrap and export
export default function(props) {
const ref = React.useRef(null);
ref.scrollToOffset({ animated: true, offset: 0 });
return <Albums {...props} scrollRef={ref} />;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.