Stack Navigator中的嵌套选项卡栏使用react navigation和redux

Question

我已经关注了这个很棒的tutorial，它是Tab Bar，有三个使用redux的标签。一切都很好。现在我试图在Stack Navigator中嵌套这个Tab Bar，但是我有以下错误：

我是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);

StackNav的navigationConfiguration.js

import { StackNavigator } from 'react-navigation';
import TabBarNavigation from './../tabBar/views/TabBarNavigation';
import Welcome from './../../Screens/Register/Welcome.js';

const routeConfiguration = {
    Welcome: { screen: Welcome },
    Home: { screen: TabBarNavigation },
};

const stackNavigatorConfiguration = {
    initialRouteName: 'Welcome',
    headerMode: 'screen',
    navigationOptions: {
        header: { visible: false }
    }
};

export const RootNav = StackNavigator(routeConfiguration, stackNavigatorConfiguration);

减速

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),
});

我也尝试使用此减速器代替nav：上面

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);

我将不胜感激任何帮助。先谢谢你了！

Answer 1

好吧，当您在reducer index中导入{RootNav}时，您正在导入AppNavigator

Answer 2

我对您的问题没有直接的答案，但我可以提供一个示例，说明如何在本教程中将Stack Navigators嵌套在Stack Navigators中 - https://developerlife.com/2017/04/15/navigation-and-styling-with-react-native/

这是设置导航器和嵌套的JS类（来自教程和它的GitHub repo） - https://github.com/r3bl-alliance/react-native-weather/blob/master/app/Router.js