react-native-router-flux Actions.{key} 无法识别并在调用时导致错误

Question

此代码用于 RN 0.57.4，但我需要升级项目才能在 Play 商店中获取它，因此该应用程序已更改为 0.61.4。这是我们使用的主要路由器：

<Router sceneStyle={styles.allSceneStyle} navigationBarStyle={styles.allSceneStyle} titleStyle={styles.allSceneStyle}>
<Scene key="root" navigationBarStyle={styles.allSceneStyle} >
    <Scene type="reset" key="login" transitionConfig={() => ({ screenInterpolator: StackViewStyleInterpolator.forHorizontal })}>
        <Scene hideNavBar key="loginForm" component={LoginForm} initial />                            
    </Scene>                        
    <Drawer
        type="reset"
        hideNavBar
        key="drawer"
        contentComponent={DrawerContent}
        drawerImage={MenuIcon}
        drawerWidth={Dimensions.get('window').width}
        drawerPosition={'right'}
    >

        <Scene key='tabbar' transitionConfig={() => ({ screenInterpolator: StackViewStyleInterpolator.forHorizontal })} >
            <Scene key="landing" type={ActionConst.REPLACE} component={Landing} title="" titleStyle={styles.centerText} initial />
            <Scene key='landing2' component={LandingComponent} title='Landing Dummy 2' titleStyle={styles.centerText} back={true} backTitle="Back" backButtonImage={newBackIcon} backButtonTextStyle={{ color: colors.white, paddingTop: 3 }} navigationBarTitleImage={{ uri: this.props.icons[constants.DUMMY_ICON] }} navigationBarTitleImageStyle={styles.navigationBarTitleImageStyle2} />
        </Scene>

    </Drawer>
    <Scene key="createAccount" component={CreateAccount} back={true} backTitle="Back" backButtonImage={newBackIcon} backButtonTextStyle={{ color: colors.white, paddingTop: 3 }} />
</Scene>

应用程序启动后，我们确实成功登陆了登录页面，并且可以登录并访问登陆页面，但每当我尝试注销时，我都会陷入无限循环。这是相关代码：

    onLogout() {
        console.log("BEFORE initial call");
        this.props.dispatch(logoutUser());
        console.log("AFTER initial call");
    }

authActions:

export const logoutUser = () => {

    return (dispatch) => {
        console.log("Within logoutUser return dispatch");
        dispatch({
            type: 'LOGOUT_USER'
        });
        console.log("Within logoutUser PAST dispatch");
        Actions.login();
        console.log("Within logoutUser PAST login");
    };

};

authReducer:

case 'LOGOUT_USER':
    return {
        ...state,
        user: {},
        loading: false,
        error: '',
        email: '',
        password: ''
    };

如果我运行这样的应用程序，我会在 logcat 中看到：

[13:10:04] I | ReactNativeJS ▶︎ BEFORE initial call
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser return dispatch
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser PAST dispatch
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser PAST login
[13:10:04] I | ReactNativeJS ▶︎ AFTER initial call
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser return dispatch
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser PAST dispatch
                             └ Within logoutUser PAST login

然后最后 3 个不断重复，直到应用程序崩溃。

如果我注释掉Actions.login();它不执行此循环，所以我相信问题出在那里。 linter 不识别登录密钥，虽然它会识别 Actions.landing、landing2 和 key='tabbar' 场景中的其他场景，我认为这是一个很大的提示，但我仍然无法弄清楚.

我也在那里尝试了 Actions.loginForm()，但那根本没有效果，而且 linter 无法识别。

我正在使用 "react-native-router-flux": "^4.0.0-beta.31" 但如果可以的话，我真的很想在不更改版本号的情况下解决这个问题。这样做总是会带来好几天的问题，一旦它出现在 Play 商店上，该项目可能就再也不会被触及了。

Answer 1

您是否尝试过将 REPLACE 类型添加到登录表单？我的猜测是您从中调用注销的组件没有卸载并不断调用注销操作。

<Scene hideNavBar key="loginForm" type={ActionConst.REPLACE} component={LoginForm} initial />

react-native-router-flux Actions.{key} 无法识别并在调用时导致错误

react-native-router-flux Actions.{key} not recognized and causes error when called

reactjs

react-native

react-native-router-flux