用react-navigation结合AsyncStorage实现条件路由时，导航Home页报找不到屏幕错误

你当前用三元条件直接切换Stack导航下的Screen集合的写法有本质缺陷：当userName为空时，整个导航器的已注册路由表只有WelcomePage、NamePage、InvitePage三个条目，Home路由被判断逻辑挡在外面，根本没被注册进当前导航器。
在NamePage里执行navigation.navigate("Home")时，导航器的路由表中不存在这个条目，自然会抛出“导航动作未被任何导航器处理”的错误——你猜测的“主页没有被初始化注册”是完全准确的。

不要靠条件渲染动态删除/新增路由，两种稳定写法任选其一：

• 固定全量路由注册，根据登录态设置初始路由
  把所有需要的Screen全部作为Stack.Navigator的子节点写出来，不要用三元判断包裹隐藏，只需要根据AsyncStorage读取到的用户名，决定应用启动时的第一个落地页。核心结构参考：

  <Stack.Navigator
    // 有用户名就直接进Home，没有就从欢迎页开始走引导流程
    initialRouteName={userName ? "Home" : "WelcomePage"}
  >
    {/* 所有路由全部平铺，不做条件隐藏 */}
    <Stack.Screen name="Home" component={Home} /* 原有header配置不动 */ />
    <Stack.Screen name="WelcomePage" component={WelcomePage} /* 原有header配置不动 */ />
    <Stack.Screen name="NamePage" component={NamePage} /* 原有header配置不动 */ />
    <Stack.Screen name="InvitePage" component={InvitePage} /* 原有header配置不动 */ />
  </Stack.Navigator>
  

• 存储完成后更新上层状态，让导航器自动切换路由，不做手动导航
  原来NamePage里存完值就手动跳Home的逻辑要删掉：一旦你手动触发导航的瞬间，userName还是空值，导航器里还没有注册Home路由，等你存完值、触发状态更新、导航器重新渲染把Home加进路由表的时候，之前执行的导航动作已经失效了。
  你可以把App层的setuserName方法通过路由参数传给NamePage，NamePage存完AsyncStorage之后，直接调用这个方法更新状态，导航器收到状态变化会自动切换到Home路由，根本不需要手动调用导航方法。
  对应改动的代码：
  1. 注册NamePage路由时传方法：

  <Stack.Screen 
    name="NamePage" 
    component={NamePage}
    initialParams={{ updateUserName: setuserName }}
  />
  

  2. 重写NamePage里的next方法：

  async function next(){
    try {
      await AsyncStorage.setItem('namekey', name)
      // 通知App层用户名已经写入，触发状态更新
      route.params.updateUserName(name)
    } catch (e) {
      console.log("errorNamePage")
    }
  }
  

补充注意：加载阶段返回空片段的逻辑可以保留，但不要在导航器的渲染过程中直接做路由的全量替换，这种操作会让导航器内部的路由表重建，之前触发的所有导航动作都会找不到对应的目标路由。

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