Expo-React Native Tab Navigation to reset any parameters on tab press - Stack Overflow

admin2025-04-21  2

I want to set it so that whenever a tab is press it takes to the main tab page, and resets any params it has. But currently lets say when i checkout i have a button that will take to that specific order page ex /orders/106/,, but after it takes when on the bottom tab i press orders tab it should take to /orders/ but it just keeps it in the same page, and when i print the state it sill has the params of 106.

It is an expo router project.

I have tried navigation.reset but it makes my navigation from one tab to another laggy.

DEBUG : state routes {  "routes": {    "0": {      "name": "home",      "key": "home-fFgtZYFe1kHVLUx2txer3"    },    "1": {      "name": "orders",      "params": {        "id": "106",        "screen": "[id]/index",        "params": {          "id": "106"        }      },      "key": "orders-tBxeaV9XOzv-Gqdvw1GGs"    },    "2": {      "name": "account",      "key": "account-KFKDqozXTMYGeaZvCV7Xp"    },    "length": 3  }}
console.js:589 2:55:51 PM | DEBUG : state index {  "stateIndex": {    "name": "orders",    "params": {      "id": "106",      "screen": "[id]/index",      "params": {        "id": "106"      }    },    "key": "orders-tBxeaV9XOzv-Gqdvw1GGs"  }}
console.js:589 2:55:51 PM | DEBUG : state index name {  "stateIndexName": "orders"}
console.js:589 2:55:51 PM | DEBUG : Current route {  "currentRoute": "orders"}
console.js:589 2:55:52 PM | DEBUG : Tab pressed {  "route": "orders"}
console.js:589 2:55:52 PM | DEBUG : state routes {  "routes": {    "0": {      "name": "home",      "key": "home-fFgtZYFe1kHVLUx2txer3"    },    "1": {      "name": "orders",      "params": {        "id": "106",        "screen": "[id]/index",        "params": {          "id": "106"        }      },      "key": "orders-tBxeaV9XOzv-Gqdvw1GGs"    },    "2": {      "name": "account",      "key": "account-KFKDqozXTMYGeaZvCV7Xp"    },    "length": 3  }}
console.js:589 2:55:52 PM | DEBUG : state index {  "stateIndex": {    "name": "orders",    "params": {      "id": "106",      "screen": "[id]/index",      "params": {        "id": "106"      }    },    "key": "orders-tBxeaV9XOzv-Gqdvw1GGs"  }}
console.js:589 2:55:52 PM | DEBUG : state index name {  "stateIndexName": "orders"}
console.js:589 2:55:52 PM | DEBUG : Current route {  "currentRoute": "orders"}

my custom tabbar

<Tabs
      screenOptions={{
        headerShown: false,
        tabBarShowLabel: false,
        tabBarStyle: {
          display: "none", 
        },
      }}
      tabBar={({ navigation, state, descriptors }) => (
        <SafeAreaView style={styles.container} edges={["bottom"]}>
          {state.routes.map((route, index) => {
            const { options } = descriptors[route.key];
            const label = options.tabBarLabel ?? options.title ?? route.name;
            const isFocused = state.index === index;

            if (["_sitemap", "+not-found"].includes(route.name)) return null;

            const onPress = () => {
              log.debug("Tab pressed", { route: route.name });
              log.debug("state routes", { routes: state.routes });
              log.debug("state index", { stateIndex: state.routes[state.index] });
              log.debug("state index name", { stateIndexName: state.routes[state.index].name });
              log.debug("Current route", { currentRoute: state.routes[state.index].name });

              const event = navigation.emit({
                type: "tabPress",
                target: route.key,
                canPreventDefault: true,
              });

              if (!isFocused && !event.defaultPrevented) {
                navigation.navigate(route.name, {});
              }
            };

            return (
              <View key={route.key} style={styles.tabWrapper}>
                <AnimatedTouchableOpacity
                  layout={LinearTransition.springify().mass(0.5)}
                  onPress={onPress}
                  style={[
                    styles.tabItem,
                    { backgroundColor: isFocused ? PRIMARY_COLOR : "transparent" },
                  ]}>
                  {options.tabBarIcon?.({
                    focused: isFocused,
                    color: isFocused ? "black" : SECONDARY_COLOR,
                    size: 28,
                  })}
                  {isFocused && (
                    <Animated.Text
                      entering={FadeIn.duration(200)}
                      exiting={FadeOut.duration(200)}
                      style={styles.text}>
                      {label as string}
                    </Animated.Text>
                  )}
                </AnimatedTouchableOpacity>
              </View>
            );
          })}
        </SafeAreaView>
      )}>

how can i fix this??

转载请注明原文地址:http://anycun.com/QandA/1745223472a90427.html