Question

我正在尝试从v1迁移代码库以使用react-navigation: 3.11并出现问题。我在这里创建了一个小要点来解决问题并提供了代码库。我将react-navigation-redux-helpers与新的react-navigation一起使用，以在其他版本中使用createReduxContainer函数来维护以前的redux设置。我收到此错误-Cannot read property 'routes' of undefined https://gist.github.com/bwoodlt/773c62d4ba3dbe0cea150a9d956bec3f

// @flow
// root navigator

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import TabNavigation from './TabNavigation';
import FCLaunch from '../../Components/FCLaunch';
import {  FCLAUNCH } from '../constants';
import { HeaderText } from '../Components';
import * as actionsOnboarding from '../../Screens/Onboarding/actions';
import StagingArea from '../StagingArea';

const RouteConfigs = {
  StagingArea: {
    screen: StagingArea,
    defaultNavigationOptions: {
      header: null
    }
  },

  [FCLAUNCH]: {
    screen: FCLaunch,
    navigationOption: () => ({
      header: null
    })
  }
};
const StackNavigatorConfig = {
  initialRouteName: 'StagingArea',
  mode: Platform.OS === 'ios' ? 'modal' : 'card'
};

export default createAppContainer(
  createStackNavigator(RouteConfigs, StackNavigatorConfig)
);

// @flow 
// AppWithNavigationState

import * as React from 'react';
import codePush from 'react-native-code-push';
import OneSignal from 'react-native-onesignal';
import { connect } from 'react-redux';
import DeviceInfo from 'react-native-device-info';
import PropTypes from 'prop-types';
import {
  createReactNavigationReduxMiddleware,
  createReduxContainer
} from 'react-navigation-redux-helpers';
import { createAppContainer } from 'react-navigation';
import { AppNavigation } from './Navigation';
import { Storage } from '../Utils';

import { NAME } from './constants';
import type { Dispatch } from '../Model';

type IAppWithNavigationProps = {
  dispatch: Dispatch
};

const codePushOptions = {
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME
};

const middleware = createReactNavigationReduxMiddleware(state => state[NAME]);

class AppWithNavigationStateObject extends React.PureComponent<
  {},
  IAppWithNavigationProps
> {
  async componentDidMount() {
    codePush.notifyAppReady();
    codePush.sync({
      updateDialog: true,
      installMode: codePush.InstallMode.IMMEDIATE
    });
    const deviceName = await Storage.get('deviceName');
    if (!deviceName) {
      await Storage.set('deviceName', DeviceInfo.getDeviceName());
    }
  }

  componentWillMount() {
    OneSignal.setLocationShared(true);

    OneSignal.inFocusDisplaying(2);
  }

  render(): React.Node {
    const { dispatch, [NAME]: state } = this.props;
    console.log(this.props);
    return <AppNavigation navigation={{ dispatch, state }} />;
  }
}

AppWithNavigationStateObject.propTypes = {
  dispatch: PropTypes.func.isRequired,
  [NAME]: PropTypes.object.isRequired
};

const AppWithNavigationStateInfo = createReduxContainer(AppNavigation);

const AppWithNavigationState = connect(state => ({
  [NAME]: state[NAME]
}))(codePush(codePushOptions)(AppWithNavigationStateInfo));

export { AppWithNavigationState, middleware };

// @flow
// navReducer

import { handleActions } from 'redux-actions';
import { NavigationActions, StackActions } from 'react-navigation';
import { REHYDRATE } from 'redux-persist/constants';

import { AppNavigation } from './Navigation';
import {
  CHAT_MAIN,
  CHAT_MESSAGE_AREA,
  NEW_MESSAGE,
  FCLAUNCH,
} from './constants';

const { getStateForAction } = AppNavigation.router;

const initialState = getStateForAction(NavigationActions.init);

const getCurrentRouteName = navState => {
  if (Object.prototype.hasOwnProperty.call(navState, 'index')) {
    console.log(navState);
    return getCurrentRouteName(navState.routes[navState.index]);
  }
  return navState.routeName;
};

const generateNavigationAction = (state, routeName, params = {}) => {
  console.log(routeName);
  // Don't navigate to the same screen if is already there.
  if (getCurrentRouteName(state) === routeName) {
    return state;
  }
  const nextState = getStateForAction(
    NavigationActions.navigate({
      routeName,
      params
    }),
    state
  );
  return nextState || state;
};

export default handleActions(
  {
    // Custom actions types
    [CHAT_MAIN]: state => generateNavigationAction(state, CHAT_MAIN),
    [FCLAUNCH]: state => generateNavigationAction(state, FCLAUNCH),
    [CHAT_MESSAGE_AREA]: state =>
      generateNavigationAction(state, CHAT_MESSAGE_AREA),
    [NEW_MESSAGE]: state => generateNavigationAction(state, NEW_MESSAGE),

    // overwritten action types from react-navigation
    [NavigationActions.NAVIGATE]: (state, { routeName }) =>
      generateNavigationAction(state, routeName),

    [NavigationActions.BACK]: state => {
      const nextState = getStateForAction(NavigationActions.back(), state);
      return nextState || state;
    },
    [NavigationActions.INIT]: state => {
      console.error(NavigationActions.INIT);
      return state;
    },
    [NavigationActions.RESET]: (state, { routeName }) => {
      console.error(NavigationActions.RESET);
      StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName })]
      });
      return state;
    },
    [NavigationActions.SET_PARAMS]: (state, { key, params }) => {
      const nextState = getStateForAction(
        NavigationActions.setParams({
          params,
          key
        }),
        state
      );
      return nextState || state;
    },
    [NavigationActions.URI]: state => {
      console.error(NavigationActions.URI);
      return state;
    },
    // Default initialRouteName
    [REHYDRATE]: (state, { payload: { auth } }) => {
      const isLogged =
        auth &&
        auth.token &&
        auth.token.length !== 0 &&
        auth.refreshToken &&
        auth.status &&
        auth.refreshToken.length !== 0;
      const nextState = isLogged
        ? state
        : generateNavigationAction(state, FCLAUNCH);
      return nextState;
    }
  },
  initialState
);
```[enter image description here][2]


  [1]: https://i.stack.imgur.com/j5dm8.png

Answer 1

所以我解决了我的问题：

class Purchase { /** * @ORM\Id() * @ORM\GeneratedValue() * @ORM\Column(type="integer") */ private $id; /** * @ORM\ManyToOne(targetEntity="Supplier") */ private $supplier; /** * @ORM\ManyToOne(targetEntity="Carrier") */ private $supplierCarrier; class Supplier { /** * @ORM\Id() * @ORM\GeneratedValue() * @ORM\Column(type="integer") */ private $id; /** * @ORM\ManyToOne(targetEntity="Supplier") */ private $supplier; /** * @ORM\ManyToOne(targetEntity="Carrier") */ private $supplierCarrier; class Carrier { /** * @ORM\Id() * @ORM\GeneratedValue() * @ORM\Column(type="integer") */ private $id; /** * @ORM\Column(type="string", length=255) */ private $label; /** * @ORM\Column(type="boolean", options={"default": false}, nullable=false) */ private $required = false;的{{1}}助手期望三个关键参数：createReduxContainer，我不是直接传递react-navigation-redux-helpers和{ dispatch, state, ...props }，而是作为dispatch个对象已传递。因此，我通过传递缺失的参数来解决此问题。

从反应导航v1迁移到v3.11时遇到问题

1 个答案: