在 ReactNav 5 中按下选项卡按钮时重置堆栈导航

Question

我有 3 个选项卡，每个选项卡后面都有一个堆栈导航。我总是想在单击另一个选项卡按钮时重置堆栈导航。

现在，当我像 A -> B -> C -> D 这样进入 Stack1 时然后我切换到 Tab2，然后再切换回 Tab1，我又回到了屏幕 D。我想再次看到屏幕 A。我使用 React-Navigation-5

我会接受任何向我展示一段代码如何实现它的答案。

我的代码如下所示：

App.js:

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Tab1" component={Stack1} />
        <Tab.Screen name="Tab2" component={Stack2} />
        <Tab.Screen name="Tab3" component={Stack3} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

我的每个堆栈导航都是这样的：

function EventExploreStack({ navigation }) {  
  return (
    <SettingsStack.Navigator initialRouteName="A">
      <SettingsStack.Screen name="A" component={AScreen} />
      <SettingsStack.Screen name="B" component={BScreen} />
      <SettingsStack.Screen name="C" component={CScreen} />
      <SettingsStack.Screen name="D" component={DScreen} />
      <SettingsStack.Screen name="E" component={EScreen} />
    </SettingsStack.Navigator>
  );
}

export default EventExploreStack;

我正在使用 React Navigation 5。

Answer 1

一种选择是使用导航的重置操作。由于您在三个选项卡中有三个堆栈，因此您需要一个自定义的 tabbarbutton 来执行此操作，这将重置给定选项卡的状态。按钮的代码如下。

这里我使用了“主页”和“设置”作为选项卡，您必须根据需要更改它们。

const CustomButton = (props) => {
  const navigation = useNavigation();
  return (
    <TouchableOpacity
      {...props}
      onPress={() => {
        navigation.dispatch((state) => {
          const newState = Object.assign(state);
          const index = newState.routes.findIndex((x) => (x.name = 'Home'));

          if (newState.routes[index].state) {
            const { name, key } = newState.routes[index];
            newState.routes[index] = { name, key };
          }

          return CommonActions.reset({
            ...newState,
          });
        });
        navigation.navigate('Settings');
      }}
    />
  );
};

您可以将其放置在标签屏幕中，如下所示

<Tab.Screen
    name="Settings"
    component={SettingsScreen}
    options={{
      tabBarButton: (props) => <CustomButton {...props} />,
   }}
  />

您可以在此处试用示例 https://snack.expo.io/@guruparan/bottomnavclick

希望这对您有所帮助:)

Answer 2

Take a look at the **createBottomTabNavigator** here https://reactnavigation.org/docs/bottom-tab-navigator/

例子

npm 安装@react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Answer 3

创建一个助手来重置当前未选中的所有选项卡的堆栈，并将其传递给每个选项卡。

像这样：

助手：

import { StackActions } from '@react-navigation/native';

export const resetStacksOnTabClicks = ({ navigation }: any) => ({
    tabPress: (e: any) => {
        const state = navigation.dangerouslyGetState();
        if (state) {
            const nonTargetTabs = state.routes.filter((r: any) => r.key !== e.target);
            nonTargetTabs.forEach((tab: any) => {
                if (tab?.state?.key) {
                    navigation.dispatch({
                        ...StackActions.popToTop(),
                        target: tab?.state?.key,
                    });
                }
            });
        }
    },
});

然后将该助手传递给 listeners 属性中的每个选项卡，如下所示：

    <Tabs.Screen
      name="TabName"
      component={YourComponent}
      listeners={resetStacksOnTabClicks}
    />

在 ReactNav 5 中按下选项卡按钮时重置堆栈导航

Reset stack navigation when tab button is pressed in ReactNav 5

navigation

react-native

例子