react-native - 如何在 React Navigation 5 的特定屏幕中禁用滑动操作？

Question

我在我的项目中使用 React Navigation 5，在项目的某处我需要制作如下所示的嵌套导航器:

*Stack Navigator
**Material top tab navigatior
***Material bottom tab navigator
**** Stack Navigator

我的目标是，实际上我想拥有 3 个像 Instagram 这样的静态屏幕。左侧是相机，然后是中间的实际内容，右侧是其他内容。只有当你处于中心位置时，我才希望底部标签可见，这就是我创建它的原因。在这种情况下，在所有屏幕中，您都可以向右或向左滑动以到达相机或右侧组件。

但我想做的是，我想在中心组件的详细屏幕中“禁用”滑动操作。因为上面的 Material 底部选项卡导航器的中心组件，还包含一些堆栈导航器，如帖子，postDetail。当我转到 postDetail 时，我想禁用向左或向右滑动操作。因为在一些细节中，我使用了一些可滑动的元素，例如 React Native Swiper 等。

我尝试在 Material 底部导航器中提供 gesturesEnabled: false , swipeEnabled: false 作为 Prop ，但它不起作用，因为它是底部选项卡导航器并且不采用这些参数。

我还 try catch 状态索引，如果它大于 0 或 1，我会禁用它，但是在 material top tab navigator 中，当我转到 postDetail 时不会更改索引。它不像以前的版本那样工作，即 react 导航 4。

  const BlogStack = createMaterialTopTabNavigator();
    const BlogStackNavigator = ({ navigation, route }) => {
        return (
            <BlogStack.Navigator
                initialRouteName="Blogs"
                tabBarOptions={{
                    style: {
                        height: 0,
                    },
                }}
                //swipeEnabled={route.state && route.state.index > 0 ? false : true}
            >
                <BlogStack.Screen name="Camera" component={Camera} />
                <BlogStack.Screen name="Blogs" component={Blog} />
                <BlogStack.Screen name="Timeline" component={Profile} />
            </BlogStack.Navigator>
        );
    };

Answer 1

尝试在 Screen 的 options 中将 gestureEnabled 设置为 false。

<Screen name={key} options={{gestureEnabled: false}} component={Component} />