gestureResponseDistance 在 React Navigation 中不起作用

Question

我正在尝试在 ReactNative 中创建一个 Sheets 类型的模式，但我无法使用滑动手势关闭屏幕，因为 gestureResponseDistance 不起作用。代码如下所示，但是是什么导致它不起作用？

不响应屏幕任何部分的示例

const Stack = createStackNavigator();

<NavigationContainer>
  <Stack.Navigator screenOptions={globalScreenOptions}>
    <Stack.Screen name="TestPage" component={TestPage} />
    <Stack.Screen
      name="Setting"
      component={Setting}
      options={{
        ...TransitionPresets.ModalPresentationIOS,
        cardOverlayEnabled: true,
        gestureEnabled: true,
        gestureResponseDistance: {
          vertical: 800,
        },
      }}
    />
  </Stack.Navigator>
</NavigationContainer>;

仅屏幕上半部分响应的例子

const Stack = createStackNavigator();

<NavigationContainer>
  <Stack.Navigator screenOptions={globalScreenOptions}>
    <Stack.Screen name="TestPage" component={TestPage} />
    <Stack.Screen
      name="Setting"
      component={Setting}
      options={{
        ...TransitionPresets.ModalPresentationIOS,
        cardOverlayEnabled: true,
        gestureEnabled: true,
      }}
    />
  </Stack.Navigator>
</NavigationContainer>;

代码略有简化。

尝试各种方法后，似乎添加 gestureResponseDistance 会使其无响应，但我怎样才能做到无论我在屏幕上的哪个位置滑动，模态窗口都会关闭？

我是外国人，正在使用翻译，所以语言可能有点陌生，但如果你能告诉我更多信息，我将不胜感激。

变量

"反应": "17.0.1",

"@react-navigation/native": "^6.0.0",

"@react-navigation/stack": "^6.0.0",

Answer 1

gestureResponseDistance 的值是一个数字而不是对象

你的情况应该是

gestureResponseDistance: 800

gestureResponseDistance 在 React Navigation 中不起作用

gestureResponseDistance does not work in React Navigation

react-native

react-navigation