ios - react 导航滑动返回不会触发

Question

我正在使用堆栈导航，并且我想使用滑动来返回。但是，即使我一直向右滑动屏幕，应用程序也不会导航到上一个屏幕，并且屏幕会滑回。

import { View } from 'react-native';
import Main from './components/Main'
import Options from './components/Options'
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {

  return (
    <NavigationContainer>
      <View>
        <Stack.Navigator initialRouteName="Main" screenOptions={{ gestureResponseDistance: {horizontal: 20}}}>
          <Stack.Screen name="MainScreen" component={Main} options={{ headerShown: false }}/>
          <Stack.Screen name="OptionsScreen" component={Options} options={{ headerShown: false }}/>
        </Stack.Navigator>
      </View>
    </NavigationContainer>
  );
}

需要明确的是，我可以滑动屏幕，但一旦松开手指，屏幕就会滑回其初始位置，并且无论我滑动多快，我都无法触发滑动返回。

Answer 1

我遇到了同样的问题，并将 @react-navigation/stack 更新到最新版本修复了它。

我的上一个 package.json 有问题

{...
    "@react-navigation/stack": "^6.3.0",
    "react-native-gesture-handler": ""~2.5.0",
...}

之后

{...
   "@react-navigation/stack": "^6.3.4",
...}

所以我删除了react-native-gesture-handler来自依赖项，因为 react-navigation/stack已经拥有它自己的了。之后我有 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="453720242631682b24312c33206822203631303720682d242b2129203705776b7d6b75" rel="noreferrer noopener nofollow">[email protected]</a>在我的包锁中，它可以正常工作，没有问题。

可以查看react-native-gesture-handler有哪些依赖项您在项目中使用:

npm why react-native-gesture-handler

你应该得到这样的东西:

<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afddcaceccdb82c1cedbc6d9ca82c8cadcdbdaddca82c7cec1cbc3caddef9d8197819f" rel="noreferrer noopener nofollow">[email protected]</a> peer
node_modules/react-native-gesture-handler
  peer react-native-gesture-handler@">= 1.0.0" from @react-navigation/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a6a1b4b6be95e3fbe6fbe1" rel="noreferrer noopener nofollow">[email protected]</a>
  node_modules/@react-navigation/stack
    @react-navigation/stack@"^6.3.4" from the root project

如果您想使用react-native-gesture-handler的特定版本您始终可以在 package.json 中重写它，如下所示:

{ 
...
  "dependencies": {...},
  "overrides": {
    "react-native-gesture-handler": "2.8.0"
  }
...
}