我们如何在反应导航中点击底部选项卡导航器上的相应选项卡按钮时实现滚动到顶部功能？

Question

我使用的React Navigation版本是v5。在与底部选项卡图标对应的滚动视图中，如果用户已经在该给定屏幕上，我想启用用户在按下该图标时滚动到顶部的功能。

Answer 1

如 documentation 中所述，此功能应该已经实现。但我认为您已将 ScrollView 放置在嵌套的 StackNavigator 中，对吗？

在这种情况下，您可能需要订阅 TabNavigator 事件并手动触发 scrollToTop

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', e => {
    // Get your scrollView ref and dispatch scrollToTop
  });

  return unsubscribe;
}, [navigation]);

希望对您有所帮助！

Answer 2

None 的解决方案在网络上对我有用，没有使用 listener 也没有使用 react-navigation 提供的 useScrollToTop。因为我有嵌套的堆栈和导航器以及自定义标签栏。

我通过设置滚动到顶部的导航参数解决了这个问题。

我有自定义标签栏，我需要滚动到主页顶部，这是标签堆栈的第一条路线。

因此，在主页中我为导航器设置了 scrollToTop 参数：

const homelistRef = React.useRef<FlatList | null>(null)

useFocusEffect(
    useCallback(() => {
      navigation.setParams({
        scrollToTop: () => homelistRef.current?.scrollToOffset({ offset: 0, animated: true }),
      });
    }, [navigation, homelistRef]),
  );


return (

<FlatList
    ref={homelistRef}
    ...{other Flatlist configs}
    />

)

在我的 Tabbar 组件中，我读取了这个新参数并在选项卡的 onPress 函数中执行它：

interface IProps extends BottomTabBarProps {}

const TabBar: React.FC<IProps> = ({ state, navigation }) => {

const handleTabPress = useCallback(
    (route) => async () => {
      const currentRoute = state.routes?.[state.index];

      if (
        route === currentRoute?.name &&
        state.routes?.[0].state?.routes?.[0]?.params?.scrollToTop
      ) {
        state.routes[0].state.routes[0].params.scrollToTop();
      }
    },
    [navigation, state],
  );

   return (
      {render tab component}
   )
}

这是在活动选项卡上执行某些操作的最终解决方案。

我们如何在反应导航中点击底部选项卡导航器上的相应选项卡按钮时实现滚动到顶部功能？

How do we implement Scroll to top functionality on tapping of the corresponding tab button on a bottom tab navigator in react navigation?

react-native

react-navigation

react-navigation-bottom-tab

react-navigation-v5