React Native中无法基于条件即时切换导航容器求助

问题根源 #

1. 代码笔误：App.js里的setUserLToken是拼写错误，应该是setUserToken，导致初始化时token无法同步到state
2. 状态未同步：仅在组件挂载时读取一次token，登录/登出修改AsyncStorage后，没有主动更新userToken状态，所以导航容器不会触发重新渲染
3. 判断逻辑错误：初始state是null，但判断条件写的是userToken === undefined，会导致初始状态错误显示AppStack

修复方案 #

1. 修正App.js核心代码 #

const App = () => {
  const [userToken, setUserToken] = useState(null)

  // 初始化读取存储中的token
  useEffect(() => {
    const getTokenFromStorage = async () => {
      const token = await getToken()
      console.warn("auth", token)
      setUserToken(token) // 修复拼写错误
    }
    getTokenFromStorage()
  }, [])

  return (
    <NavigationContainer>
      {/* token不存在时显示认证页面，存在则显示应用页面 */}
      {!userToken ? <AuthStack /> : <AppStack />}
    </NavigationContainer>
  )
}

2. 登录/登出时同步更新状态 #

登录组件（如Signin.js）的登录逻辑：

// 假设已有登录接口请求逻辑
const handleLogin = async () => {
  const token = await loginApi(username, password) // 调用登录接口获取token
  await saveToken(token) // 将token存入AsyncStorage
  setUserToken(token) // 同步更新state，触发导航切换
}

登出组件（如Profile.js）的登出逻辑：

const handleLogout = async () => {
  await removeToken() // 删除AsyncStorage中的token
  setUserToken(null) // 同步更新state，触发导航切回认证页
}

如果项目页面较多，不想逐层传递setUserToken，可以用React Context做全局状态管理，让所有组件都能直接访问和修改token状态。

新手学习资源 #

• React Navigation官方文档：重点关注「Authentication flows」章节，有完整的登录状态管理示例
• React Native AsyncStorage官方文档：掌握存储、读取、删除数据的标准用法
• React Context官方文档：学习小型项目的全局状态共享方案
• React Hooks官方文档：熟练掌握useState、useEffect的核心用法

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