0

我有一个堆栈导航，我想启用滑动以返回 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 react-navigation 版本 4 一样在 android 上滑动返回时

4

2 回答 2

4

这就是我让它工作的方式，希望它也对你有用。

无法在 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

于 2020-04-04T16:39:26.607 回答
2

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

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

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

于 2021-10-26T08:08:29.500 回答