React Native 导航手势

Posted 2023-03-15

【中文标题】React Native 导航手势

【英文标题】：React Native Navigation Gesture

【发布时间】：2016-03-21 06:13:47

【问题描述】：

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

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

【参考方案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 可以解决问题。