react-navigation 启用滑动以返回 android

Posted 2023-02-19

【中文标题】react-navigation 启用滑动以返回 android

【英文标题】：react-navigation enable swipe to back on android

【发布时间】：2020-07-09 15:54:34

【问题描述】：

我有一个堆栈导航，我想在 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;

预期的行为是当像 ios 一样在 android 上滑动返回时 反应导航版本 4

【参考方案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

【参考方案2】：

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

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

这些选项将在 android 上启用手势，现在方向将是“水平”，在 android 上默认为“垂直”。