react-native - React Navigation navigation.replace() 在 useEffect 中使应用程序崩溃

Question

我有一个屏幕，我可以在其中检查这是否是用户第一次启动应用程序，然后导航到相应的屏幕。每当触发该navigation.replace()功能时，应用程序就会崩溃。下面是代码。我究竟做错了什么？

import React, { useEffect } from 'react'
import * as SecureStore from 'expo-secure-store'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { ActivityIndicator } from 'react-native-paper'

export default function RedirectScreen({ navigation }) {
  function navigateAway(routeName) {
    navigation.replace(routeName)
  }
  useEffect(() => {
    try {
      SecureStore.getItemAsync('initialLaunch').then((val) => {
        if (val) {
          navigateAway('AuthScreen')
        } else {
          SecureStore.setItemAsync('initialLaunch', 'yes').catch((err) =>
            console.log(err),
          )

          navigateAway('Onboarding')
        }
      })
    } catch (error) {
      console.log(error)
    }
  }, [])

  return (
    <SafeAreaProvider
      style={{
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <ActivityIndicator />
    </SafeAreaProvider>
  )
}```

标签： react-nativeexporeact-navigation-v5react-navigation-stack

Answer 1

在文档中，它声明 navigation.replace 仅在 navigator 是 stack navigator时才有效。

现在我无法确定这是否是您的问题，因为您没有分享应用程序崩溃时遇到的确切错误，但在我看来，您可以处理您描述的情况有所不同。

我建议您在此处按照文档示例进行身份验证流程

https://reactnavigation.org/docs/auth-flow

基本上你可以设置一个像 isFirstLoad 这样的状态变量，然后在你的 Navigator 中执行类似的操作：

<Navigator>
    {isFirstLoad ? (
      <Navigator.Screen
        name="Onboarding"
        component={Onboarding}
      />
    ) : (
      <Navigator.Screen
        name="AuthScreen"
        component={AuthScreen}
      />
    )}
</Navigator>