react-native - 在嵌套导航器的某些屏幕中禁用父 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)滑动。同样在开发阶段的后期，News Feed List 将转换为 StackNavigator，用户可以在其中选择每个新闻项目并详细阅读。我还希望在深入 NewsFeedList 时禁用它。

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

主页导航配置:

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

根导航配置:

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

关于你的问题，

I only want this feature when I am in News Feed List

当您设置导航时，它采用 TabNavigator(RouteConfigs, TabNavigatorConfig) 的形式

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