React Native Navigation 导航不从 useEffect 触发

Question

我正在尝试编写一个 React Native 功能组件，它只检查 Redux 状态中的某些值，并根据该结果立即将用户重新路由到正确的屏幕。

如果我将错误的 routeName 发送到导航函数，它会抛出一个错误，指出它找不到路线。但是当我传递一个存在的路由名称时，它什么都不做。

我可以 100% 验证导航和向导是否具有正确的数据以使其正常工作。任何想法我在这里缺少什么？提前致谢！

import React, { useEffect } from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';

const SetupLoader = ( props:any ) => {
    const { navigation, wizard } = props;

    let setupRoute = '';

    useEffect(() => {
        // HANDLE CASE OF MID-REGISTRATION
        if (!wizard.step1) {
            setupRoute = 'Step1';
        }
        if (!wizard.step2) {
            setupRoute = 'Step2';
        }
        else {
            setupRoute = 'Dashboard';
        }
        navigation.navigate(setupRoute);
    },[]);

    return (
        <View></View>
    )
}

const mapStateToProps = ( state:any ) => ({
    wizard: state.wizard
});

export default connect(mapStateToProps)(SetupLoader);

Answer 1

有几件事需要确认：

确保您的 SetupLoader 组件已安装。
您需要监听向导状态变量的变化。

useEffect(() => {
// HANDLE CASE OF MID-REGISTRATION
 if (!wizard.step1) {
   setupRoute = 'Step1';
 }
 if (!wizard.step2) {
   setupRoute = 'Step2';
 }
 else {
   setupRoute = 'Dashboard';
 }
 navigation.navigate(setupRoute);
},[wizard]);

Answer 2

部分要感谢 Wen，我才能让它工作。我将重定向路由名称绑定到状态变量中。然后 useEffect 更新该变量，并在第二次通过 useEffect 时调用导航，屏幕重新正确路由。

import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';

const SetupLoader = (props: any) => {
    const { navigation, wizard } = props;

    const [route, setRoute] = useState('');

    useEffect(() => {
        if (route === '') {
            let setupRoute = '';
            if (!wizard.step1) {
                setupRoute = 'Step1';
            } 
            else if (!wizard.step2) {
                setupRoute = 'Step2';
            } 
            else {
                setupRoute = 'Dashboard';
            }
            setRoute(setupRoute);
        } else {
            navigation.replace(route);
        }
    }, [ route ]);
        
    return (
        <View></View>
    )
}

const mapStateToProps = (state: any) => ({
    wizard: state.wizard
});

export default connect(mapStateToProps)(SetupLoader);

React Native Navigation 导航不从 useEffect 触发

React Native Navigation navigate not firing from useEffect

react-native

use-effect

react-native-navigation