React Native 导航手势答案

【问题标题】：React Native Navigation GestureReact Native 导航手势
【发布时间】：2016-03-21 06:13:47
【问题描述】：

我正在使用 React Native 的 Navigator 浏览 iOS 应用程序中的场景。我发现虽然我可以通过从左边缘向右滑动来滑回上一个屏幕，但看起来我可以滑动的区域不像原生导航那么大或响应灵敏。有时我从边缘滑动一点，但它不起作用。

我想知道是否有办法对这个区域进行一些调整，即让滑动返回区域更大一点，以便用户有更好的成功率。

【问题讨论】：

标签： ios react-native

【解决方案1】：

这可能不是最好的解决方案，但您可以在 NavigatorSceneConfigs.js 中更改 edgeHitWidth

“从左到右”的默认值为 30

这将影响您的整个项目，并且每次升级 react native 时都需要再次进行这些更改。

【讨论】：

【解决方案2】：

不知道还能不能帮上忙：

const SCREEN_WIDTH = require('Dimensions').get('window').width;

const buildStyleInterpolator = require('buildStyleInterpolator');

const BaseSceneConfig = Navigator.SceneConfigs.HorizontalSwipeJump;
const CustomBackGesture = Object.assign({}, BaseSceneConfig.gestures.jumpBack, {
  // Make it so we can drag anywhere on the screen
  edgeHitWidth: SCREEN_WIDTH,

});
const CustomForwardGesture = Object.assign({}, BaseSceneConfig.gestures.jumpForward, {
  // Make it so we can drag anywhere on the screen
  edgeHitWidth: SCREEN_WIDTH,

});
const CustomSceneConfig = Object.assign({}, BaseSceneConfig, {
  // A very tighly wound spring will make this transition fast
  springTension: 100,
  springFriction: 1,
  gestures: {
    jumpBack: CustomBackGesture,
    jumpForward: CustomForwardGesture,
  },
});

您可以自定义手势和 edgeHitWidth：SCREEN_WIDTH 可以解决问题。

【讨论】：