嵌套后无法切换场景

时间:2018-12-29 16:24:07

标签: react-native react-native-android react-native-router-flux

我能够切换到员工列表,但是我得到了后退按钮。因此,我尝试将它们嵌套到单独的场景中,但是当我尝试嵌套场景时,它将不再导航到下一个场景。这是我的代码。

在索引动作文件的底部,我有一个名为loginUserSuccess的动作,在loginUserSuccess动作内部是Actions.employeeList()行。

我仍在使用employeeList的相同场景键。

src / actions / index.js

import firebase from '@firebase/app';
import { Actions } from 'react-native-router-flux';
import {
  EMAIL_CHANGED,
  LOGIN_USER,
  LOGIN_USER_FAIL,
  LOGIN_USER_SUCCESS,
  PASSWORD_CHANGED
} 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
  });
  console.log(Actions.currentScene);
  Actions.employeeList();
  console.log(Actions.currentScene);
};

在此路由器文件中,我将登录场景嵌套在auth场景中,并将employeeList场景嵌套在主场景中。这是我开始切换场景的问题。

src / Router.js

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import LoginForm from './components/LoginForm';
import EmployeeList from './components/EmployeeList';

const RouterComponent = () => {
  const { navigationBarTitleStyle } = styles;

  return (
    <Router>
      <Scene key="root">
        <Scene key="auth">
          <Scene
            key="login"
            component={LoginForm}
            title="Please Login"
            titleStyle={navigationBarTitleStyle}
            initial
          />
        </Scene>
        <Scene key="main">
          <Scene
            key="employeeList"
            component={EmployeeList}
            title="Employee List"
            titleStyle={navigationBarTitleStyle}
          />
        </Scene>
      </Scene>
    </Router>
  );
};

const styles = {
  navigationBarTitleStyle: {
    flex: 1,
    textAlign: 'center'
  }
};

export default RouterComponent;

有人知道可能是什么问题吗?我正在遵循Stephen Grider编写的关于Udemy的完整React Native和Redux课程指南,但是react native是一个快速发展的目标。

1 个答案:

答案 0 :(得分:0)

我发现了问题所在,我需要更改Actions.employeeList();到Actions.main();在src / actions / index.js文件中。

我需要定位该场景中的父级而不是子级。然后它将在主场景内加载第一个场景。我还可以在employeeList上设置初始名称,以使其更加清晰。

相关问题