React Navigation Android认证流报The specified child already has a parent错误

问题根因 #

该问题是@react-navigation/native-stack与react-native-reanimated beta版本在Android端的已知兼容冲突，条件切换嵌套导航时原生View层重复挂载触发报错，iOS端因为原生渲染逻辑不同不会触发。

可行解决方案，按优先级选择： #

• 补全react-native-reanimated配置
  检查项目根目录的babel.config.js，确认react-native-reanimated/plugin已经添加到plugins数组的最后一位，配置示例：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      // 其他插件
      'react-native-reanimated/plugin', // 必须放在所有插件最后
    ],
  };
  

  修改后要清空缓存重启服务：npx react-native start --reset-cache，重新打包Android应用后验证。

• 调整导航条件渲染写法
  不要动态增删Stack.Screen节点，改为固定声明单个Screen，通过状态动态绑定组件，同时添加唯一key强制刷新节点：

  // RootNavigator.tsx修改后代码
  export const RootNavigator = selectConnect(selectCurrentUser)((props: Partial<CurrentUserProps>) => {
    return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          gestureEnabled: true,
        }}>
        <Stack.Screen
          key={props.isAuthenticated ? 'home' : 'login'}
          name="RootScreen"
          component={props.isAuthenticated ? HomeNavigator : LoginNavigator}
        />
      </Stack.Navigator>
    );
  });
  

• 替换native-stack为JS版stack
  卸载@react-navigation/native-stack，安装@react-navigation/stack，原有API基本兼容，只是底层用JS实现渲染，没有原生层的兼容问题，性能差异普通场景几乎感知不到。

• 绑定NavigationContainer的key到认证状态
  如果以上方案都不生效，给NavigationContainer添加和认证状态绑定的key，强制切换状态时重建整个导航容器：

  // App.tsx修改后代码
  return (
    <ReduxProvider store={rootStore}>
          <NavigationContainer 
            ref={navigationRef}
            key={isAuthenticated ? 'auth' : 'unauth'}
          >
            <RootNavigator />
          </NavigationContainer>
    </ReduxProvider>
  );
  

内容的提问来源于stack exchange，提问作者La Gregance