Question

当我使用react-navigation包中的任何导航器并且你实现redux时，我已经读到了某个地方;导航器中的每个组件＆＃39;路线将被重新加载（即componentWillRecieveProps）

但是，我有两个用户可以登录的页面

export const MainScreenTabNavigator = TabNavigator({
    Start: {
        screen: Start,
        navigationOptions: {
            title: 'Start',
        },
    },
},{
    tabBarPosition: "bottom",
    tabBarOptions: {
        activeTintColor: '#222',
        labelStyle: {
            color: '#ddd',
        },
        style: { backgroundColor: '#333' },
    }
});

export const AppNavigator = StackNavigator({
    Main: {
        screen: MainScreenTabNavigator, // Nested tab navigator
    },
    Login: {
        screen: Login,
        navigationOptions: {
            title: 'Aanmelden',
        }
    },
    Camera: {
        screen: AppCamera,
        navigationOptions: {
            title: 'Camera',
        }
    }

}, {
    mode: 'modal',
    headerMode: 'none',
});

登录屏幕最初显示给用户。它有一个表格，用户可以手动输入凭证，还有一个导航到相机的按钮，用户可以使用登录凭证扫描QR码。

在这两种情况下，用户都会调度登录操作。登录页面和相机页面都会听到相同的道具更改：

componentWillReceiveProps(nextProps) {
    if (nextProps.account.loginSuccess) {
        this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Start' }));
    } else {
        if (nextProps.account.loginError) {
            Toast.showLongBottom(nextProps.loginError);
        }
    }
    this.setState({spinnerVisible: false});
}

该应用成功导航至“开始”＃39但是当它同时重新加载登录和相机页面时，会导致无限循环进入componentWillReceiveProps并无限导航到“开始”状态。一遍又一遍。

这是我的导航缩减器：

function nav(state = initialNavState, action) {
    const nextState = AppNavigator.router.getStateForAction(action, state);

    // Simply return the original `state` if `nextState` is null or undefined.
    return nextState || state;
}

我该怎么做才能防止这种行为？

Answer 1

那么，

作为临时解决方案，我在导航状态中引入了另一个布尔值：

function nav(state = initialNavState, action) {
    let nextState = null;

    if (action.type === 'Navigation/NAVIGATE' && action.routeName === 'Start') {
        nextState = {...AppNavigator.router.getStateForAction(action, state), authenticated: true};
    } else {
        nextState = AppNavigator.router.getStateForAction(action, state);
    }

    // Simply return the original `state` if `nextState` is null or undefined.
    return nextState || state;
}

我使用authenticated检查登录后是否应登录登录或相机组件。

它有效，但仍然感觉我错过了一些东西。

在组件之间导航会重新加载导航器路径中的所有组件

1 个答案: