使用反应导航和 redux 的 Stack Navigator 内的嵌套选项卡栏

Question

我已经关注了这个很棒的 tutorial，它是使用 redux 的带有三个选项卡的选项卡栏。一切都很好。现在我试图将此选项卡栏嵌套在 Stack Navigator 中，但出现以下错误：

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

我也试过用这个 reducer 代替 nav: above

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

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

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

Answer 2

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

使用反应导航和 redux 的 Stack Navigator 内的嵌套选项卡栏

Nested Tab bar inside Stack Navigator using react navigation and redux

react-native

redux

react-redux

react-navigation