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 install @ 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中按下选项卡按钮时，重置堆栈导航

3 个答案:

示例