按 T​​ab 滚动到平面列表的顶部

Question

我想实现滚动到顶部。我的选项卡是一个平面列表，当用户向下滚动平面列表时，他们必须向上滚动。 Instagram 和 Twitter 允许你按标签向上滚动，我想知道如何在我自己的应用程序中实现它。

这是我要实现滚动到顶部的选项卡：

//Bottom Tabs
function Tabs() {

...

  <Tab.Screen 
    name="Home" 
    component={globalFeedStackView}
    options={{
      tabBarLabel: ' ',
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="ios-home" size={size} color={color} />
      ),
    }}
  />

}

上面选项卡的 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>
    )
}

根据 react navigation 我可以这样做：

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

但是这个解决方案是针对滚动视图的，而我使用的是平面列表。

如何实现按标签滚动到平面列表的顶部？

Answer 1

scrollToOffset

您可以使用 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} />;
}