首页 > 解决方案 > 如何在反应原生导航中解决“无法获取配置,因为路线没有 routeName”问题?

问题描述

我正在尝试在文档中使用带有 redux 的 react-native 中的 react-navigation,但我收到此错误“无法获取配置,因为路由没有 routeName”。我尝试过的代码如下

也请给我解释一下,如何使用“createReactNavigationReduxMiddleware”

import {
   createStackNavigator,
} from 'react-navigation';
import {
  createStore,
  applyMiddleware,
  combineReducers,
} from 'redux';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
  createNavigationReducer,
} from 'react-navigation-redux-helpers';
import { Provider, connect } from 'react-redux';
import React from 'react';
import login from "./features/login/containers"
import settings from "./features/settings/containers"
import * as screenNames from "./navigation/screen_names";



const AppNavigator = createStackNavigator(
  {
    [screenNames.LOGIN]: login,
    [screenNames.SETTINGS]: settings
  },
  {
    initialRouteName: [screenNames.LOGIN]
  }
);

const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers({
  nav: navReducer,
});

// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);

const NavApp = reduxifyNavigator(AppNavigator, "root");
const mapStateToProps = (state) => ({
  state: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(NavApp);

const store = createStore(
  appReducer,
  applyMiddleware(middleware),
);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}

错误信息如下所示

标签: react-nativereduxreact-navigationreact-native-navigationreact-navigation-stack

解决方案


您将 initialRouteName 定义为数组。

    initialRouteName: [screenNames.LOGIN]

除非它是对象中的关键,否则它不应该在大括号中。

    initialRouteName: screenNames.LOGIN

应该修复它。


推荐阅读