react-navigation 滑动返回不会触发答案

【问题标题】：react-navigation swipe to go back doesn't triggerreact-navigation 滑动返回不会触发
【发布时间】：2020-12-29 15:23:20
【问题描述】：

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

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>
  );
}

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

【问题讨论】：

为什么你用 view 包裹你的堆栈导航器？是否有任何特殊要求，因为使用视图包装堆栈导航器可能会产生问题。如果没有特殊要求用视图包装你的堆栈导航器，那么删除并重试。
删除并不能解决问题。它仍然具有相同的行为。

标签： ios reactjs react-native expo react-navigation

【解决方案1】：

在遇到同样的问题后，我发现问题是一个useEffect被反复触发。

UseEffect(() => { *code here* })

改为：

UseEffect(() => { *code here* }, [])

【讨论】：

【解决方案2】：

在堆栈选项中尝试gestureEnabled: true，因为这个道具可以向后滑动

export default function App() {

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

【讨论】：

根据文档，gestureEnabled 的默认值为 true。明确设置它并不能解决问题。