React native 使用react navigation和redux在堆栈导航器中嵌套选项卡栏

我遵循了这个很棒的方法，即使用redux的三个选项卡的选项卡栏。一切都很好。现在，我尝试将此选项卡栏嵌套在堆栈导航器中，但出现以下错误：

我是Redux的新手，真的找不到问题出在哪里。这是我的密码：

StackNav.js

import React from 'react';
import { connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';

import { RootNav } from './../navigationConfiguration';

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

class StackNav extends React.Component {
    render() {
        const { dispatch, navigationState } = this.props;
        return (
            <RootNav
                navigation={
                    addNavigationHelpers({
                        dispatch,
                        state: navigationState,
                    })
                }
            />
        );
    }
}

export default connect(mapStateToProps)(StackNav);

还原剂

import { combineReducers } from 'redux';

// Navigation
import { AppNavigator } from './../stackNav/navigationConfiguration';
import { NavigatorTabOne } from './../tabOne/navigationConfiguration';
import { NavigatorTabTwo } from './../tabTwo/navigationConfiguration';
import { NavigatorTabThree } from './../tabThree/navigationConfiguration';

export default combineReducers({
    nav: (state, action) => AppNavigator.router.getStateForAction(action, state),
    tabOne: (state, action) => NavigatorTabOne.router.getStateForAction(action, state),
    tabTwo: (state, action) => NavigatorTabTwo.router.getStateForAction(action, state),
    tabThree: (state, action) => NavigatorTabThree.router.getStateForAction(action, state),
});

我也试过用这个减速机代替上面的导航

import { AppNavigator } from './../stackNav/navigationConfiguration';

const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Welcome'));

export const navReducer = (state = initialState, action) => {
  const nextState = AppNavigator.router.getStateForAction(action, state);

  return nextState || state;
};

应用程序的起点：

import React from 'react';
import {
    AppRegistry,
    Text
} from 'react-native';

import { Provider } from 'react-redux';

import StackNav from './../App/stackNav/views/StackNav';
import store from './store';

Text.defaultProps.allowFontScaling = false;

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

AppRegistry.registerComponent('MyApp', () => App);

从“React”导入React；
进口{
评估学，
正文
}从“反应本机”；
从'react redux'导入{Provider}；
从“/../App/StackNav/views/StackNav”导入StackNav；
从“./store”导入存储；
Text.defaultProps.allowFontScaling=false；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
AppRegistry.registerComponent（'MyApp'，（）=>App）；

---

我将感谢任何帮助。提前谢谢你

我无法直接回答您的问题，但我可以在本教程中提供一个如何在堆栈导航器中嵌套选项卡导航器的示例-

下面是设置导航器和嵌套的JS类（来自教程和GitHub repo）

---

好吧，当您应该在索引中导入{RootNav}时，您正在导入AppNavigator

import React from 'react';
import {
    AppRegistry,
    Text
} from 'react-native';

import { Provider } from 'react-redux';

import StackNav from './../App/stackNav/views/StackNav';
import store from './store';

Text.defaultProps.allowFontScaling = false;

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

AppRegistry.registerComponent('MyApp', () => App);