在initialParams传递回调遇non-serializable警告，求登录导航切换方案

问题分析 #

你当前的代码存在两个核心问题：

• 导航渲染逻辑判断颠倒：isLoggedIn为true时反而显示登录页，和业务预期完全相反
• 通过initialParams传递回调函数，触发React Navigation的「non-serializable values were found in the navigation state」警告——因为回调函数属于非序列化数据，无法被存储到导航状态中

修正方案 #

放弃通过导航参数传递回调，直接将状态更新函数作为组件props传递给登录页面，同时修正导航渲染逻辑：

修改后的MainNav.tsx

const MainNav = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const performLogIn = () => setIsLoggedIn(true);

  return (
    <Stack.Navigator>
      {/* 未登录时显示登录页，登录后切换到标签导航 */}
      {!isLoggedIn ? (
        <Stack.Screen name="LogIn">
          {/* 直接将状态更新函数作为props传给登录组件 */}
          {() => <LogIn performLogIn={performLogIn} />}
        </Stack.Screen>
      ) : (
        <Stack.Screen name="TabNav" component={TabNav} />
      )}
    </Stack.Navigator>
  );
};

修改后的LogIn.tsx

// 直接从props接收回调，无需从route.params中读取
const LogIn = ({ performLogIn }) => (
  <View>
    <Text>Log in</Text>
    <Button title="Log in" onPress={performLogIn} />
  </View>
);

TabNav.tsx（无需修改）

const TabNav = ({route}) => (
  <View>
    <Text>This is the logged in tab navigation main page</Text>
  </View>
);

原理说明 #

• 用Stack.Screen的render prop方式传递组件，能直接将父组件的状态更新函数传给登录页，完全避开导航参数的序列化限制
• 修正后的逻辑符合业务流程：未登录展示登录界面，登录成功后自动切换到标签导航系统

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