React navigation createStackNavigator 在路由之间切换

Question

我在 Expo 中使用 React native，我正在尝试在我的组件中进行动态重定向导航。 当用户来到我的页面时，我想检查一个异步值，并根据这个值的结果，我希望用户被重定向到屏幕之一。 我正在使用来自 expo 和 redux 状态的 AppLoading。但现在我的堆栈上似乎无法使用导航。 这是我的代码：

const Stack = createStackNavigator();

export default function Mynavigation({ navigation }: BasicNavigationProps) {
    const dispatch = useDispatch()
    const { appLoading } = useSelector(userStateSelector)

    const navigateToRoute = async () => {
        const goToPage2 = await needToGoPage2()

        if (goToPage2) {
            navigation.navigate('Page2')
        } else {
            navigation.navigate('Page1')
        }
    }

    return (
        appLoading ? (
            <Stack.Navigator initialRouteName="Page1" headerMode="none">
                <Stack.Screen name="Page1" component={Page1}/>
                <Stack.Screen name="Page2" component={Page2}/>
            </Stack.Navigator>
        ) : (
            <AppLoading
                startAsync={ navigateToRoute }
                onFinish={() => dispatch(saveAppLoading(false))}
                onError={() => {
                    console.log('error')
                }}
            />
        )
    )
}

我是不是忘记了什么？ 我用两个不同的堆栈导航实现了另一个解决方案，但我不知道女巫版本更好用吗？

const Stack1 = createStackNavigator();
const Stack2 = createStackNavigator();

export default function Mynavigation({ navigation }: BasicNavigationProps) {
    const dispatch = useDispatch()
    const [check, setCheck] = useState(false)
    const { appLoading } = useSelector(userStateSelector)

    const navigateToRoute = async () => {
        const goToPage2 = await needToGoPage2()

        setCheck(goToPage2)
    }

    return (
        appLoading ? (
            check ? (
                <Stack1.Navigator initialRouteName="Page1" headerMode="none">
                    <Stack1.Screen name="Page1" component={Page1Stack1}/>
                    <Stack1.Screen name="Page2" component={Page2Stack1}/>
                </Stack1.Navigator>
            ) : (
                <Stack2.Navigator initialRouteName="Page1" headerMode="none">
                    <Stack2.Screen name="Page1" component={Page1Stack2}/>
                    <Stack2.Screen name="Page2" component={Page2Stack2}/>
                </Stack2.Navigator>
            )
        ) : (
            <AppLoading
                startAsync={ navigateToRoute }
                onFinish={() => dispatch(saveAppLoading(false))}
                onError={() => {
                    console.log('error')
                }}
            />
        )
    )
}

感谢您的帮助

Answer 1

你是对的。在这个阶段你不能使用导航道具。

从组件的 props 中移除它并尝试这样做：

const Stack = createStackNavigator();

export default function Mynavigation({ navigation }: BasicNavigationProps) {
     const [initialRouteName, setInitialRouteName] = React.useState('');
     const [loading, setLoading] = React.useState(true);

     const navigateToRoute = async () => {
          const goToPage2 = await needToGoPage2()
          if (goToPage2) {
               setInitialRouteName('Page2')
          } else {
               setInitialRouteName('Page1')
          }
          setLoading(false);
     }

     return (
          loading === false && initialRouteName.length > 0 ? (
               <Stack.Navigator initialRouteName={initialRouteName} headerMode="none">
                    <Stack.Screen name="Page1" component={Page1} />
                    <Stack.Screen name="Page2" component={Page2} />
               </Stack.Navigator>
          ) : (
                    <AppLoading
                         startAsync={navigateToRoute}
                         onFinish={() => dispatch(saveAppLoading(false))}
                         onError={() => {
                              console.log('error')
                         }}
                    />
               )
     )
}