React Native 在 TabNavigator 中禁用滑动 StackNavigator

Question

我有带屏幕 1 和 2 的 TabNavigator 以及带屏幕 1 的内部屏幕我有带屏幕 1.1 和 1.2 的 StackNavigator。我启用了滑动和手势。从 root 开始，我可以在 1 和 2 之间滑动标签。当我在屏幕 1 上并打开屏幕 1.1 时，我仍然可以滑动到屏幕 2，当 1.1 屏幕打开时，我需要以某种方式禁用此功能。

我需要它像 Instagram 应用程序一样工作 (ios)。在主屏幕 (1) 上时，您可以向左滑动以查看直接屏幕 (2)。当您从主屏幕 (1) 打开朋友资料时，它会作为屏幕 (1.1) 打开，您无法向左滑动以打开直接屏幕 (2)。你只能回去了。

我的这个功能工作得很好，但是有了这个 "bug" 我可以从屏幕 1.1 导航到屏幕 2。

我尝试了很多通过阅读文档和其他人的导航问题以不同的方式解决这个问题，但不知何故并没有真正按照我的需要工作。我想我的嵌套屏幕结构有问题，或者以不同的方式解决了。

有人知道吗？

Answer 1

选项卡中的每个屏幕都可以单独设置导航选项swipeEnabled。

查看 Tab Navigator Screen Navigation Options 文档。

MyScreen.navigationOptions = ({navigation}) => ({
  swipeEnabled: false
});

您可以将该值设置为检查堆栈导航器是否已导航到的函数的结果。

更新 - 反应导航 3

此属性已删除，并替换为 gesturesEnabled。
您可以为每个屏幕单独设置值，或在导航器配置级别设置默认值。

const navigator = createStackNavigator(
  {
    Main: { screen: Main },
    ...
  },
  {
    defaultNavigationOptions: {
      gesturesEnabled: false,
    },
    ...
  }
);

Answer 2

在 React Navigation v5 中是 gestureEnabled 而不是 gesturesEnabled。

https://reactnavigation.org/docs/stack-navigator/#gestureenabled

Answer 3

虽然这是一个有点老的话题，但我可能希望避免一些人匆忙浏览旧的和无用的 GitHub 讨论旧 React Navigation 版本的帖子。

对于 React Navigation 5，只需创建 StackNavigator 并将具有 { gestureEnabled: false } 值的 options 道具传递给不应对手势做出反应的屏幕：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      headerMode="screen"
    >
      <Stack.Screen
        name="Settings"
        component={Settings}
        // disable gestures for one specific screen
        options={{
          gestureEnabled: false,
        }}
      />
    </Stack.Navigator>
  );
}

在此处阅读更多内容：https://reactnavigation.org/docs/stack-navigator/#example

React Native 在 TabNavigator 中禁用滑动 StackNavigator

React Native disable swiping StackNavigator in TabNavigator

reactjs

react-native

react-navigation

更新 - 反应导航 3