react-navigation 滑動返回不會觸發

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

在遇到同樣的問題后，我發現問題是一個 useEffect 被一遍又一遍地觸發。

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

變成：

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

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

Answer 3

如果屏幕在向后滑動時凍結，請嘗試detachPreviousScreen: false在 Stack Screen 的選項中使用gestureEnabled: true用於 ios。

Answer 4

試試gestureEnabled：假。

<Stack.Screen name={stringAssets.BottomTabs} component={BottomTabs} options={{ headerShown: false, gestureEnabled: false}} />