在标签导航中点击图标以滚动到列表顶部在 react-native 中不起作用

问题描述

我的 React 本机应用程序中有一个底部选项卡导航，在第一个选项卡屏幕中，我有一个基本上包含平面列表的组件，我希望当用户点击该选项卡图标时滚动到顶部（基本上就像微博）。我尝试了几种使用 scrollToIndex 和 scrollToOffset 的实现，并尝试在 react-navigation 中使用 useScrollToTop，这是我的实现：

（TabNavigator.js）：

<Tab.Screen
  name="Home"
  component={HomeNavigation}
  options={{
    tabBarButton: (props) => (
      <TouchableOpacity
        {...props}
        style={[...props.style,styles.buttonStyle]}
        disabled={currentShapeAnim.name === 'home'}
        onPress={() => {
          setTimeout(() => {
            navigation.navigate('Home');
          },550);
          selectTab('home',jumpHome,bounceHome,wp(35));
        }}>
        {!hideHome && (
          <Shape icon="e-home" shapeAnimations={[bounceHome]} />
        )}
        <Shape icon="f-home" shapeAnimations={[bounceHome,jumpHome]} />
      </TouchableOpacity>
    ),}}
/>
... // other screens

在我的主页组件中：

 const recipeScroll = useRef(null);
 useScrollToTop(recipeScroll);
...
...
<FlatList
        ref={recipeScroll}
        style={{marginLeft: wp(2),width: '100%',height: hp(20)}}
        data={meals}
        showsHorizontalScrollIndicator={false}
        horizontal
        scrollEnabled
        renderItem={({item}) => <MealCard item={item} {...item} />}

解决方法

尝试滚动到第一个索引或项目。

通过scrolltoindex函数