使用反应导航和 redux 在 Stack Navigator 中嵌套标签栏答案

【问题标题】：Nested Tab bar inside Stack Navigator using react navigation and redux使用反应导航和 redux 在 Stack Navigator 中嵌套标签栏
【发布时间】：2017-04-27 13:39:58
【问题描述】：

我关注了这个很棒的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),
});

我也试过用这个减速器代替导航：上面

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-native redux react-redux react-navigation

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：