Question

请检查下面的代码我必须在登录成功后导航到 EmployeeCreate 。我在我的AuthActions.js中的dispatch(NavigationActions.navigate({ routeName: 'EmployeeCreate' }));中使用此代码。但是没有工作。以前我使用'react-native-router-flux'而不是反应导航。我很想做出反应原生的，无法找到问题。

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集成（特别针对您的情况推荐）并使用Redux的默认dispatch。我为 react-navigation + Redux

创建了一个准系统回购

Answer 2

在较新版本的React Navigation中，使用Redux flow进行反应导航的方式几乎没有变化。

您可以从3.x的文档本身中找到执行此操作的最佳方法。

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

react-navigation在反应本机操作中不起作用

2 个答案: