React Native复用嵌套分类页面时navigation.goBack()跳转异常求助

我做了一个多层级产品分类功能，复用Categories Screen组件，用FlatList渲染当前层级的分类。点击分类项时，导航到同一个Categories Screen并传入下一级分类数据，预期的导航路径是：Add Product Screen > Category Screen (L1) > Category Screen (L2) > Category Screen (L3)。

但现在遇到问题：在L3页面调用navigation.goBack()时，直接回到了Product Screen（根页面），而不是预期的L2页面。推测是复用同一个页面导致的，但不知道怎么在复用单个页面时维护正确的栈历史，避免被覆盖。

导航器代码 #

<Stack.Navigator ...>
  <Stack.Screen
    component={ProductScreen}
    name="ProductScreen"
  />
  <Stack.Screen
  component={CategoryScreen}
  name="CategoryScreen"
  />
</Stack.Navigator>

Category Screen代码 #

export const CategoryScreen = ({ navigation }: ScreenProps) => {
  const renderItem: ListRenderItem<string> = ({item}) => {
      ...
      <Pressable onPress={() => handleCategoryPress()}>
      ...
      </Pressable>
    );
  };

  return (
    <ScreenContainer goBack={navigation.goBack}>
      <FlatList data={categories} renderItem={renderItem} />
    </ScreenContainer>
  );

  function handleCategoryPress() {
   ...
    navigation.navigate(
      'CategoryScreen',
      { categories: filteredCategories, level: nextLevel },
    );
  }
};

依赖版本 #

"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"react-native": "0.70.5",

解决方法 #

核心问题是你使用navigation.navigate跳转到同名页面时，React Navigation 6的navigate方法会优先寻找栈中已存在的同名页面实例并跳转，同时清除该实例上方的所有页面，导致栈历史被覆盖。

只需要将navigation.navigate替换为navigation.push即可：

修改handleCategoryPress函数：

function handleCategoryPress() {
 ...
  navigation.push(
    'CategoryScreen',
    { categories: filteredCategories, level: nextLevel },
  );
}

原理说明

• navigate：若目标页面已在栈中存在，会直接跳转到该实例并移除其上方的页面；若不存在则添加新实例。
• push：无论目标页面是否存在，都会在栈顶添加一个新的页面实例，这样就能维护L1→L2→L3的层级栈，调用goBack时会依次返回L2→L1→Add Product Screen。

同时请确认ScreenContainer中传递的goBack是原生的navigation.goBack，没有被其他逻辑篡改。

内容的提问来源于stack exchange，提问作者Harry Riley