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

Question

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

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

所以应用程序默认在 HomeNavigation 上启动。向左滑动查看Camera，向右滑动查看MessagesList。

现在HomeNavigation 进一步划分如下：

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

在此导航器中，News Feed List 默认显示。现在，当我转到Home Navigation 中的NotificationsList 或Search News 时。向左或向右滑动会将我带到我不想要的 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);

主页导航：

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。您在每个screen 对象中指定的navigationOptions 允许覆盖TabNavigatorConfig 中的navigationOptions。基本上，您将所有屏幕的“通用”配置传递给 TabNavigatorConfig navigationOptions 和 screen-specific 到 RouteConfigs navigationOptions。