react-navigation在react-native动作中不起作用

Question

请检查以下代码我必须导航到EmployeeCreate登录成功后。我在我的AuthActions.js中的dispatch(NavigationActions.navigate({ routeName: 'EmployeeCreate' }));中使用它。但不起作用。以前我使用'react-native-router-flux'而不是react-navigation。 Iam新来反应，并且找不到问题。

App.js

import React, { Component } from 'react'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import firebase from 'firebase'; 
import ReduxThunk from 'redux-thunk'; 
import reducers from './reducers'; 
import Router from './Router'; 

class App extends Component { 
componentWillMount() { 
const config = { 
apiKey: "###", 
authDomain: "###", 
databaseURL: "###", 
projectId: "###", 
storageBucket: "###, 
messagingSenderId: "0000000" 
}; 

firebase.initializeApp(config); 
} 

render() { 
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); 

return (
    <Provider store={store}> 
    <Router /> 
    </Provider> 
); 
} 
} 

export default App; 

Router.js

import React from 'react'; 
import { StackNavigator} from 'react-navigation'; 
import LoginForm from './components/LoginForm'; 
import EmployeeList from './components/EmployeeList'; 
import EmployeeCreate from './components/EmployeeCreate'; 
import EmployeeEdit from './components/EmployeeEdit'; 


const RouterComponent = StackNavigator({ 
    LoginForm : {screen : LoginForm}, 
EmployeeCreate : {screen :EmployeeCreate}, 
    EmployeeEdit:{screen:EmployeeEdit}, 
}, 
{ 
    headerMode : 'none', 
    navigationOptions:{ 
    headerVisible : false, 
} 
} 
) 
export default RouterComponent; 

AuthActions.js

import firebase from 'firebase'; 
    import { NavigationActions } from 'react-navigation' 
    import { 
     EMAIL_CHANGED, 
     PASSWORD_CHANGED, 
     LOGIN_USER_SUCCESS, 
     LOGIN_USER_FAIL, 
     LOGIN_USER 
    } from './types'; 

    export const emailChanged = (text) => { 
     return { 
     type: EMAIL_CHANGED, 
     payload: text 
     }; 
    }; 

    export const passwordChanged = (text) => { 
     return { 
     type: PASSWORD_CHANGED, 
     payload: text 
     }; 
    }; 

    export const loginUser = ({ email, password }) => { 
     return (dispatch) => { 
     dispatch({ type: LOGIN_USER }); 

     firebase.auth().signInWithEmailAndPassword(email, password) 
      .then(user => loginUserSuccess(dispatch, user)) 
      .catch((error) => { 
      console.log(error); 

      firebase.auth().createUserWithEmailAndPassword(email, password) 
       .then(user => loginUserSuccess(dispatch, user)) 
       .catch(() => loginUserFail(dispatch)); 
      }); 
     }; 
    }; 

    const loginUserFail = (dispatch) => { 
     dispatch({ type: LOGIN_USER_FAIL }); 
    }; 

    const loginUserSuccess = (dispatch, user) => { 
     dispatch({ 
     type: LOGIN_USER_SUCCESS, 
     payload: user 
     }); 
    dispatch(NavigationActions.navigate({ routeName: 'EmployeeCreate' })); 
    }; 

AuthReducer.js

import { 
    EMAIL_CHANGED, 
    PASSWORD_CHANGED, 
    LOGIN_USER_SUCCESS, 
    LOGIN_USER_FAIL, 
    LOGIN_USER 
    } from '../actions/types'; 

    const INITIAL_STATE = { 
    email: '', 
    password: '', 
    user: null, 
    error: '', 
    loading: false 
    }; 

    export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
     case EMAIL_CHANGED: 
     return { ...state, email: action.payload }; 
     case PASSWORD_CHANGED: 
     return { ...state, password: action.payload }; 
     case LOGIN_USER: 
     return { ...state, loading: true, error: '' }; 
     case LOGIN_USER_SUCCESS: 
     return { ...state, ...INITIAL_STATE, user: action.payload }; 
     case LOGIN_USER_FAIL: 
     return { ...state, error: 'Authentication Failed.', password: '', loading: false }; 
     default: 
     return state; 
    } 
    }; 

Answer 1

您正在使用Redux的dispatch方法。您应该使用React-navigation的dispatch方法。您可以执行下列操作之一：

1）不要this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'EmployeeCreate' }))

2）或整合React-navigation与Redux（建议你的情况尤其是），并使用终极版的默认dispatch。我创建了一个准系统回购仅为react-navigation + Redux