Question

我一直在尝试为我的应用实现嵌套的Navigators。应用程序的结构非常简单。

RootNavigation(TabNavigator):
    - Camera
    - HomeNavigation (TabNavigator)
    - MessagesList

默认情况下，应用程序会在HomeNavigation上显示。向左滑动Camera并向右滑动至MessagesList。

现在HomeNavigation进一步划分为：

HomeNavigation (TabNavigator):
    - News Feed List
    - NotificationsList
    - Search News

在此导航器中，默认显示News Feed List。现在，当我转到NotificationsList中的Search News或Home Navigation时。向左或向右滑动即可转到我不想要的Camera和MessagesList。我在News Feed List时只想要这个功能。现在我正在阅读文档，但不能完全理解如何禁用RootNavigation (Parent Navigator) from inside the child中的滑动。同样在开发阶段的后期，News Feed List将转换为StackNavigator，用户可以在其中选择每个新闻项并详细阅读。我还希望在NewsFeedList更深入时禁用它。

也许这段代码有助于更好地了解我的情况：

HomeNavigationConfigurtation：

const homeNavigationConfiguration = {
    TabOneNavigation: {
        screen: FeedScreen,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor, focused }) => {
                return (
                    <Ionicons
                        name={focused ? 'ios-home' : 'ios-home-outline'}
                        size={30}
                        style={{ color: tintColor }}
                    />
                );
            }
        }
    },
    TabTwoNavigation: {
        screen: SearchTab,
        navigationOptions: {
            tabBarLabel: 'Search',
            tabBarIcon: ({ tintColor, focused }) => {
                return (
                    <Ionicons
                        name={focused ? 'ios-search' : 'ios-search-outline'}
                        size={30}
                        style={{ color: tintColor }}
                    />
                );
            }
        }
    },
    TabThreeNavigation: {
        screen: NotificationTab,
        navigationOptions: {
            tabBarLabel: 'Notify',
            tabBarIcon: ({ tintColor, focused }) => {
                return (
                    <Ionicons
                        name={focused ? 'ios-list' : 'ios-list-outline'}
                        size={30}
                        style={{ color: tintColor }}
                    />
                );
            }
        }
    }
};

const tabBarConfiguration = {
    //...other configs
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    tabBarOptions: {
        showIcon: true,
        showLabel: false,
        activeTintColor: '#347FC4',
        inactiveTintColor: '#929AA1',
        activeBackgroundColor: '#FFF',
        inactiveBackgroundColor: '#FFF'
    }
};

export const HomeNavConfiguration = TabNavigator(routeConfiguration, tabBarConfiguration);

HomeNavigation：

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

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

export default connect(mapStateToProps)(HomeNavigation);

HomeNavigationReducer：

export default (state, action) => {
    if (action.type === 'JUMP_TO_TAB') {
        return { ...state, index: 0 };
    }
    return HomeNAvigationConfig.router.getStateForAction(action, state);
};

RootNavigationConfiguration：

const routeConfiguration = {
    RootNavigationScreenLeft: {
        screen: CameraScreen,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    RootNavigationScreenMiddle: {
        screen: RootTab,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    RootNavigationScreenRight: {
        screen: MessagesListScreen,
        navigationOptions: {
            tabBarVisible: false
        }
    }
};

const tabBarConfiguration = {
    //...other configs
    swipeEnabled: true,
    animationEnabled: true,
    lazy: true,
    initialRouteName: 'RootNavigationScreenMiddle'
};

export const RootNavigationConfig = TabNavigator(routeConfiguration, tabBarConfiguration);

根导航

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

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

export default connect(mapStateToProps)(RootNavigation);

任何解决方案或建议都将受到高度赞赏。：）

Answer 1

从用户体验的角度来看，用户可能会感到困惑。你基本上做的是，

RootNavigation (TabNavigator)
- Camera
- News Feed List
- NotificationsList
- Search News
- MessagesList

考虑一下你的情况是否有效？

RootNavigation(StackNavigator):
    - Camera
    - HomeNavigation (TabNavigator)
    - MessagesList

HomeNavigation (TabNavigator):
    - News Feed List
    - NotificationsList
    - Search News

关于你的问题，

我在News Feed List
时只想要此功能

设置导航时，其格式为TabNavigator(RouteConfigs, TabNavigatorConfig)

您可以将navigationOptions传递给RouteConfigs和TabNavigatorConfig。您在每个navigationOptions对象中指定的screen允许覆盖navigationOptions中的TabNavigatorConfig。基本上，您将所有屏幕的“常规”配置传递给TabNavigatorConfig navigationOptions和screen-specific到RouteConfigs navigationOptions。

在嵌套导航器中的某些屏幕中禁用滑动父TabNavigator

1 个答案: