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

Question

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

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

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

但我想做的是，我想在中心组件的详细屏幕中"禁用"滑动操作。Becose 中心组件是上面的材料底部选项卡导航器，也包含一些堆栈导航器，如帖子，postDetail。 当我去 postDetail 时，我想禁用向左或向右滑动操作。在某些细节上，我使用了一些可滑动的元素，如反应原生滑动器等。

我试图在材料底部导航器中提供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>
);
};

Answer 1

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

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

Answer 2

您需要将 gestureEnabled 设置为 false，但它不会作为道具发送。您需要在选项属性中设置它。如果要为所有屏幕设置它，可以将其放置在导航器中，如下所示：

<BlogStack.Navigator
initialRouteName="Blogs"
tabBarOptions={{
style: {
height: 0,
},
}}
screenOptions={{gestureEnabled: false}}
>

或仅适用于特定屏幕：

<BlogStack.Screen name="Camera" options={{gestureEnabled: false}} component={Camera} />