无法在react-navigation中导航到嵌套的DrawerNavigator路由

时间:2017-12-31 18:24:19

标签: javascript react-native redux react-navigation

我正在尝试反应导航,但我似乎无法在我的本机应用中导航到嵌套的DrawerNavigator路由。

成功登录后,我想导航到主屏幕但不起作用

我的设置如下所示;

App.js

const requestBody = {
    From: 10,
    page:2,
    Size:10
};

axios.request('POST', 'https://myexport.dev.com/export', requestBody )
.then(response => {data:response.data}) //response is comming as null here
.catch((error) => {
    //handle error
}           
});

NavReducer.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { StackNavigator, DrawerNavigator, addNavigationHelpers } from                 'react-navigation';
import { Provider, connect } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';

import reducers from './reducers';
import AppNavigator from './AppNavigator';

class App extends React.Component {
    render() {
        return (
            <AppNavigator navigation={addNavigationHelpers({
                dispatch: this.props.dispatch,
                state: this.props.nav,
            })} />
        );
    }
}

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

const AppWithNavigationState = connect(mapStateToProps)(App);

class Root extends Component {
    render() {
        const store = createStore(reducers, {},     applyMiddleware(ReduxThunk));

        return (
            <Provider store={ store }>
                <View style={{ flex: 1 }}>
                    <AppWithNavigationState />
                </View>
            </Provider>
        );
    }
}

export default Root;

AppNavigator.js

import { NavigationActions } from 'react-navigation';
import AppNavigator from '../AppNavigator';

const initialState = AppNavigator.router.getStateForAction(
    NavigationActions.init()
    // AppNavigator.router.getActionForPathAndParams('Main')
);

export default navReducer = (state = initialState, action) => {
    const nextState = AppNavigator.router.getStateForAction(action, state);

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

登录操作

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import LandingPage from './components/LandingPage';
import LoginScreen from "./components/LoginForm";
import RegistrationScreen from "./components/RegistrationForm";
import Homepage from "./components/Homepage";

const LoginStack = StackNavigator({
    LandingPage: { screen: LandingPage },
    Login: { screen: LoginScreen },
    Registration: { screen: RegistrationScreen },
}, {
    headerMode: 'none',
    initialRouteName: 'LandingPage'
});

const DrawerNavigatorStack = DrawerNavigator({
    Home: { screen: Homepage }
}, {
    headerMode: 'none',
    initialRouteName: 'Home'
});

const DrawerNavigation = StackNavigator({
    DrawerStack: { screen: DrawerNavigatorStack }
}, {
    headerMode: 'none',
    initialRouteName: 'DrawerStack'
});

const AppNavigator = StackNavigator({
    LoginStack: { screen: LoginStack },
    Main: { screen: DrawerNavigation }
}, {
    headerMode: 'none',
    initialRouteName: 'LoginStack'
});

export default AppNavigator;

它成功调度了LOGIN_USER_SUCCESS和后续导航操作,但实际上并没有导航到主屏幕

如果我用'LoginStack'中的路线替换'Home'路线,它将导航到该屏幕没有问题。例如,这将起作用

export const loginUser = ({ email, password }) => {
    return (dispatch) => {
        dispatch({ type: LOGIN_USER });
        const data = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: email,
                password: password
            })
        };

        const url = Globals.API_URL + 'accounts/login';
        return fetch(url, data)
            .then(response => {
                const responseBody = JSON.parse(response._bodyText);

                if (response.status === 200) {
                    dispatch({ type: LOGIN_USER_SUCCESS });

                    dispatch(NavigationActions.navigate({
                        routeName: ‘Home’,    <=== supposed to navigate to the Home screen at this point
                        params: responseBody.data.access_token
                    }));
                } else {
                    loginUserFail(dispatch, responseBody.message);
                }
            });
    }
}

我显然缺少一些东西,任何想法可能是什么?

提前致谢

0 个答案:

没有答案