реагировать-навигация не работает в действиях, связанных с реагированием

Пожалуйста, проверьте мой код ниже. Мне нужно перейти к EmployeeCreate после успешного входа. Я использую его в dispatch(NavigationActions.navigate({ routeName: 'EmployeeCreate' })); в моем AuthActions.js. но не работает. Раньше я использовал response-native-router-flux вместо реакции-навигации. Я новичок в 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;
    }
  };

person Vinod C    schedule 29.10.2017    source источник


Ответы (2)


Вы используете dispatch метод Redux. Вместо этого вы должны использовать dispatch метод React-навигации. Вы можете сделать одно из следующих действий:

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

2) Или интегрируйте React-navigation с Redux (особенно рекомендуется для вашего случая) и используйте Redux по умолчанию dispatch. Я создал репозиторий barebones только для react-navigation + Redux

person Shubhnik Singh    schedule 29.10.2017
comment
Благодарность!! первый вариант у меня не работает. попробую второй - person Vinod C; 29.10.2017

Навигация React с потоком Redux немного изменена в новых версиях React Navigation.

Вы можете узнать, как это сделать, в 3.x самой документации.

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

person Sriraman    schedule 25.06.2019