react-navigate 中动态选择初始路由名称

Posted 2023-03-15

【中文标题】react-navigate 中动态选择初始路由名称

【英文标题】：Dynamically select the initial route name in react-navigate

【发布时间】：2021-07-17 17:36:01

【问题描述】：

我的应用将有 4 个主页：A、B、C 和主页

在显示主页之前，用户需要经过A、B和C（依次，使用react-navigation) 收集一些信息。我将使用expo-secure-store 将信息存储在设备中。

如果用户完成了所有步骤，下次启动应用程序时，我想直接显示主页屏幕。

考虑到SecureStore.getItemAsync 是异步的，我在启动我的应用程序时无法查询它：

const Stack = createStackNavigator();

export default function App() 

  const data = await SecureStore.getItemAsync("pincode");
  var firstScreen = data ? "Homepage" : "A";
  /* alt solution - not working
  SecureStore.getItemAsync("data").then((data) => 
    firstScreen = data ? "Homepage" : "A";
  );
  */

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName=firstScreen>
        <Stack.Screen name="A" component=AScreen />
        <Stack.Screen name="B" component=BScreen />
        <Stack.Screen name="C" component=CScreen />
        <Stack.Screen name="Homepage" component=HomepageScreen />
      </Stack.Navigator>
    </NavigationContainer>
  );

如果我使用await 我会得到意外的保留字'await'，而如果我以异步方式执行此操作，firstScreen 的值当然会设置为延迟。 p>

【问题讨论】：

您可以在从 expo 安全存储中获取数据时显示一些加载屏幕。并且 async 和 await 需要一起使用。 Await 需要 async，但 async 不需要 await。

【参考方案1】：

你想把任何状态（所以你的firstScreen 与useState 反应状态。 您希望（针对您的“问题”）在安装组件时初始化状态。我们使用带有开放 dep 数组的效果来处理它。由于状态保存在 SecureStore 中，我们通过 Async 调用检索它，因此我编写了一个函数，该函数将使用 Async/Await 来检索它并在完成时填充状态。 如上所述，您可能希望显示某种形式的加载过程，以便不会向用户显示尚未准备好的页面！

类似的东西（顺便说一句 - 您可能希望将其提升为导航组件以保持您的 App 组件简单！）：

const Stack = createStackNavigator();

export default function App() 
  const [firstScreen, setFirstScreen] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => 
    SecureStore.getItemAsync("pincode").then(
      (data) => 
        setFirstScreen(data? 'Homepage' : 'A');
        setLoading(false);
      
    ).catch((err) => 
        setLoading(false);        
        setFirstScreen('A');
    );
  , []);

  if (loading) 
    return null; //Or something to show that you are still warming up!
  

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName=firstScreen>
        <Stack.Screen name="A" component=AScreen />
        <Stack.Screen name="B" component=BScreen />
        <Stack.Screen name="C" component=CScreen />
        <Stack.Screen name="Homepage" component=HomepageScreen />
      </Stack.Navigator>
    </NavigationContainer>
  );