执行popToTop()后调用navigate导致iOS应用崩溃

问题描述 #

在iOS平台上，执行popToTop()后立即调用navigate("Screen1")会导致应用崩溃，但相同代码在Android平台运行完全正常。相关导航栈代码如下：

props.navigation.popToTop(); 
props.navigation.navigate("Screen1"); // 该语句导致iOS崩溃

// 关联的栈导航结构
const SingleStack = () => {
    const MyStack = createNativeStackNavigator();
    const { theme } = useTheme(); 

    return (
    <MyStack.Navigator screenOptions={(params) => DefaultScreenOptions({ params, colors: theme.colors, sizes: theme.sizes, })} >
        <MyStack.Screen name="Screen1" component={Screen1} options={{ title: "Screen 1", }} />
        // ... 其他页面
    </MyStack.Navigator>
    );
};

const DefaultScreenOptions = ({ params, colors, sizes, }) => {
    return ({
        headerTintColor: colors.headerTextColor,
        headerStyle: { backgroundColor: colors.headerBackgroundColor },
        headerRight: () => (
            <Icon name="bars" type="font-awesome"
                size={sizes.defaultIconSize * 1.5}
                color={colors.headerTextColor}
                onPress={() => params.navigation.dispatch(DrawerActions.toggleDrawer())}
                containerStyle={{ padding: 10, }} 
            />
        ),
    });
};

问题原因 #

popToTop()是异步操作，iOS平台的导航栈状态更新需要一定时间。如果在popToTop()还未完成时就调用navigate，会导致导航栈处于不一致的状态，进而触发崩溃。Android平台的导航栈处理机制对这种时序问题兼容性更好，因此没有出现崩溃。

解决方案 #

方案1：用reset直接重置导航栈（推荐） #

直接将导航栈重置为只包含Screen1，避免异步操作的时序问题：

props.navigation.reset({
  index: 0,
  routes: [{ name: "Screen1" }],
});

方案2：等待popToTop完成后再调用navigate #

利用popToTop()返回的Promise，确保栈操作完成后再执行导航：

// 方式1：async/await
const navigateAfterPop = async () => {
  await props.navigation.popToTop();
  props.navigation.navigate("Screen1");
};
// 调用该函数替代原连续调用
navigateAfterPop();

// 方式2：then链式调用
props.navigation.popToTop().then(() => {
  props.navigation.navigate("Screen1");
});

方案3：先检查栈顶页面，避免重复导航 #

如果popToTop()后的栈顶已经是Screen1，则无需再调用navigate，减少不必要的操作：

const currentRoute = props.navigation.getCurrentRoute();
if (currentRoute?.name !== "Screen1") {
  props.navigation.popToTop().then(() => {
    props.navigation.navigate("Screen1");
  });
}

内容的提问来源于stack exchange，提问作者Bilal Abdeen