反应导航启用滑动返回 android

Question

我有一个堆栈导航，我想在 android 和 IOS 上启用滑动返回有我的代码

import {
  createStackNavigator,
  StackViewTransitionConfigs,
} from "react-navigation-stack";
import HomeScreen from "../../screens/Home/Home";
import CategoryScreen from "../../screens/Category/Category";
import SubCategoryScreen from "../../screens/SubCategory/SubCategory";
import ProductScreen from "../../screens/Product/Product";

const ShopStack = createStackNavigator(
  {
    Shop: {
      screen: HomeScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
    Category: {
      screen: CategoryScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
    SubCategory: {
      screen: SubCategoryScreen,
    },
    Product: {
      screen: ProductScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
  },
  {
    headerMode: "none",
    transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,

    defaultNavigationOptions: {
      gesturesEnabled: true,
    },
  },
);
export default ShopStack;

预期的行为是滑动返回 android 就像 ios 反应导航版本 4

Answer 1

这就是我让它发挥作用的方法，希望它也适用于你。

无法在 react-navigation 5 上获得相同的结果

const AppStack = createStackNavigator({
  FolderListScreen: {
    screen: FolderListScreen,
    navigationOptions: ({ navigation }) => ({
      // title: 'This is title'
      header: null
    })
  },
  Edit: {
    screen: EditScreen,
    navigationOptions: ({ navigation }) => ({
      header: null
    })
  },
  FoldersListModal: {
    screen: FoldersListModal
  },
  WebViewScreen: {
    screen: WebViewScreen
  },

},

// DOCUMENTATION
// https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig

{
  headerMode: 'none',
  mode: 'card',
  defaultNavigationOptions: {
    gesturesEnabled: true,
    // if you want to change the back swipe width 
    //just put the number, e.g. 100 would be fine to get the iOS effect
    gestureResponseDistance: {
      horizontal: Dimensions.get('window').width
    }
  },
  transitionConfig: () => ({
    transitionSpec: {
      duration: 300,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;

      // const height = layout.initHeight;
      const width = layout.initWidth;
      const translateX = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [width, 0, 0],
      });

      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      });

      return { opacity, transform: [{ translateX }] };
    },
  })
});

编辑： 我也让它在 v5 上运行

https://snack.expo.io/@ukiand1/react-navigation-5---android-swipe-back-bug

Answer 2

至于 v5、v6 有一个更简单的解决方案，只需将这些值放入 Stack.Navigator

中的 screenOptions

gestureDirection: 'horizontal',
gestureEnabled: true,
...
<Stack.Navigator
  screenOptions={{
  gestureDirection: 'horizontal',
  gestureEnabled: true,
}}>

这些选项将在 android 上启用手势，方向现在将为 'horizontal'，在 android 上默认为 'vertical'。

反应导航启用滑动返回 android

react-navigation enable swipe to back on android

react-native

react-navigation

react-navigation-stack

react-native-gesture-handler