React Native禁用在TabNavigator中刷卡StackNavigator

Question

我有带屏幕1和2的TabNavigator，在屏幕1内。我有带屏幕1.1和1.2的StackNavigator。我已启用滑动和手势功能。从根本上，我可以在1和2之间滑动选项卡。当我在屏幕1上并打开屏幕1.1时，我仍然可以滑动到屏幕2，而在打开1.1屏幕时我需要以某种方式禁用此功能。

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

我可以正常使用此功能，但可以使用“错误”从屏幕1.1导航到屏幕2。

我通过阅读文档和其他人与导航有关的问题，尝试了多种方式来解决此问题，但是实际上并不能按我的需要工作。我猜想嵌套屏幕结构有问题或以其他方式解决了。

有人有线索吗？

Answer 1

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

查看“ 标签导航器屏幕导航选项”文档。

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

虽然它有点旧，但我想也许可以让一些人免于匆忙浏览讨论旧 React Navigation 版本的旧的和无用的 GitHub 帖子。

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

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