时间戳

首页 > 解决方案 > 如何在反应导航 5 的特定屏幕中禁用滑动操作？

react-native - 如何在反应导航 5 的特定屏幕中禁用滑动操作？

问题描述

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

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

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

但我想做的是，我想在中心组件的详细屏幕中“禁用”滑动操作。因为中心组件是上面的材料底部选项卡导航器，也包含一些堆栈导航器，如帖子、postDetail。当我去 postDetail 我想禁用向左或向右滑动操作。因为在某些细节上，我使用了一些可滑动的元素，例如 react native swiper 等。

我试图将gesturesEnabled: false , swipeEnabled: false材料底部导航器作为道具提供，但它不起作用，因为它是底部选项卡导航器并且不采用这些参数。

我还尝试捕获状态索引，如果它大于 0 或 1，我会禁用它，但在材料顶部选项卡导航器中，例如，当我转到 postDetail 时，它不会更改索引。它不像以前的版本那样工作，即反应导航 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>
        );
    };

标签： react-nativereact-navigation-v5

解决方案

尝试gestureEnabled在falseScreen 的options.

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

推荐阅读