react-navigation 在 react-native 操作中不起作用答案

【问题标题】：react-navigation is not working in react-native actionsreact-navigation 在 react-native 操作中不起作用
【发布时间】：2017-10-29 07:05:22
【问题描述】：

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

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;
    }
  };

【问题讨论】：

标签： react-native react-redux react-native-android react-navigation

【解决方案1】：

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

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

2) 或者将React-navigation 与Redux 集成（特别推荐用于您的情况）并使用Redux 的默认dispatch。我为 react-navigation + Redux

创建了一个准系统 repo

【讨论】：

谢谢！！第一个选项不适合我。我会尝试第二个

【解决方案2】：

在 React Navigation 的较新版本中，使用 Redux 流的 React 导航进行了一些更改。

您可以在他们的文档中查看3.x 的最佳方法。

https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

【讨论】：