首页 文章

在使用React-Navigation和Redux for React-Native App时,undefined不是对象(评估'action.routeName')

提问于
浏览
0

对于React Native应用程序,我收到以下错误(上面已明确说明并在屏幕截图中注明here) . 我正在对redux实施react-navigation .

我还没有在应用程序中添加任何重定向 . 我打算根据LoggedIn状态调用NavigationActions重定向到Login屏幕,LoggedIn状态由管理用户状态的单独reducer配置 .

当我没有redux管理导航状态时,应用程序正常工作 . 当我意识到我需要一些基于用户登录状态的重定向时,我决定将导航状态置于redux中,该状态由redux管理 .

我的代码如下:

src / navigators / middleware.js

import {
  createNavigationPropConstructor,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';

// building redux utils for navigation
export const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav,
);

export const navigationPropConstructor = createNavigationPropConstructor('root');

src / navigators / AppNavigator.js

import React from 'react';

import { StackNavigator } from 'react-navigation';
import Welcome from '../screens/Welcome';
import Dashboard from '../screens/Dashboard';
import Login from '../screens/Login';

routeNames = {
  Welcome: { screen: Welcome },
  Dashboard: { screen: Dashboard },
  Login: { screen: Login },
};

config = {
  navigationOptions: ({
    header: 'null',
    headerStyle: {
      backgroundColor: 'white',
      borderBottomWidth: 0,
    },
    headerLeft: null,
    headerTitleStyle: {
      fontSize: 30,
      fontFamily: 'Roboto-Bold',
    },
  }),
};

export const AppNavigator = StackNavigator(routeNames, config);

src / navigators / AppWithInternalState.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';
import { AppNavigator } from './AppNavigator';
import { initializeListeners } from 'react-navigation-redux-helpers';
import { navigationPropConstructor } from './middleware';

class AppWithInternalState extends React.Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    nav: PropTypes.object.isRequired,
  };

  componentDidMount = () => {
    initializeListeners('root', this.props.nav);
  };

  render = () => {
    const { dispatch, nav } = this.props;
    const navigation = navigationPropConstructor(dispatch, nav);
    return <AppNavigator navigation={ navigation } />;
  };
}

const mapStateToProps = state => ({
  nav: state.nav,
});

export default connect(mapStateToProps)(AppWithInternalState);

src / reducers / navReducers

import { AppNavigator } from '../navigators/AppNavigator';
import { NavigationActions } from 'react-navigation';

const router = AppNavigator.router;

const firstAction = router.getActionForPathAndParams('Dashboard');
const tempNavState = router.getStateForAction(firstAction);

const secondAction = router.getActionForPathAndParams('Login');
const initialNavState = router.getStateForAction(secondAction, tempNavState);

export default navReducer = (state=initialNavState, action) => {
  let nextState;
  switch (action.type) {
    case 'Login':
      nextState = router.getStateForAction(
        NavigationActions.back(),
        state,
      );
      break;
    default:
      nextState = router.getStateForAction(action.state);
      break;
  }
};

1 回答

  • 0

    我自己能够解决这个问题 . 使用createNavigationPropConstructor时,看起来反应导航存在问题 . 在react-navigation@2.03发布之前,这将无法解决 . 在此之前,创建自己的导航道具:

    import { createReduxBoundAddListener } from 'react-navigation-redux-helpers';
    
    const navigation = {
      dispatch,
      state: nav,
      addListener: createReduxBoundAddListener('root'),
    };
    

    您可以在此处查看和跟踪问题:https://github.com/react-navigation/react-navigation/issues/4320

相关问题