React Native - PanResponder - 捕获冒泡机制详解

Posted 2023-05-07

参考技术A 最近的react-native项目中需要在嵌套元素之间切换获得手势的响应权，那么作为前端的我，第一反应就是 捕获-冒泡 模型。故深入了解了一下react-native的panResponder-Api。并在此记录，以供日后中年的我可以摆脱 ***脱发 ***的烦恼。

首先 react-native 出于原生而胜于原生(开发效率上)，所以它的手势行为几乎与原生一致的。但是没有原生那样可以深度定制，不过基本能解决大部分场景。下面这张图是不是 跟 甲虫-卡布达很像，这让我想起了铁架小宝，还有帅气的水嶋宏主演的假面骑士(不小心暴露了年龄 (￣o￣).zZ )

它的手势行为 是基于“ 捕获-冒泡 ”的询问模型，这一点和web端的事件行为倒是很像。怎么理解呢？

时机 ： 发生在手指刚触摸到屏幕的时候

这是 唯一的方式 重新分配该次手势的响应权

时机 ： 手指开始在屏幕移动的时候

react-native panResponder传送门

release 事件只会基于最后获得响应权的元素定义的行为去执行。若响应权有变更，会从那个元素定义的 grant事件开始。

多指的情况下，将每个手指的触摸行为独立区分就可以了。相当于一个并行操作。每个手指的手势行为有它自己独立的生命周期。

~ 关于作者 ~
这是我在发表的第一篇 博文，希望大家多多支持给点鼓励，如有错误的地方也请第一时间告诉作者，避免误人子弟 o((⊙﹏⊙))o.

React-native：看起来你全局安装了 react-native

【中文标题】React-native：看起来你全局安装了 react-native

【英文标题】：React-native: Looks like you installed react-native globally

【发布时间】：2016-10-23 07:26:17

【问题描述】：

在全局安装时，react-native 似乎存在错误。我需要它正确执行而不会看到此错误：

$ react-native run-ios
Looks like you installed react-native globally, maybe you meant react-native-cli?
To fix the issue, run:
npm uninstall -g react-native
npm install -g react-native-cli

其他论坛上发布的解决方案对我不起作用，我不明白为什么这不起作用。

package.json:

  "name": "react-native-svgkit",
  "version": "0.2.2",
  "main": "Svg.js",
  "description": "A <Svg /> element for react-native that renders Svg images using SVGKit",
  "author": "Brent Vatne <[e-mail]> (https://github.com/brentvatne)",
  "peerDependencies": 
    "react": "15.1.0",
    "react-native": ">=0.4.4"
  ,
  "devDependencies": 
    "react-native": ">=0.4.4",
    "react-native-cli": "^0.1.10"
  ,
  "dependencies": 
    "d3": "^3.5.5",
    "jsdom-jscore": "^0.1.0",
    "react-native-svg": "^2.2.0"
  ,
  "repository": 
    "type": "git",
    "url": "[e-mail]:brentvatne/react-native-svgkit.git"
  ,
  "scripts": 
    "start": "node /usr/local/lib/node_modules/react-native/local-cli/cli.js start"
  

【问题讨论】：

你是通过 npm 运行这个命令吗？

是的，它位于标准全球位置/usr/local/bin/react-native

你能分享你的 package.json 文件吗？

react-native-svgkit 是一个旧项目，尚未开发，最新版本的 react-native 不支持。您是对 svg 库感兴趣还是想要升级和维护该库？

我感兴趣的不是使用库本身，而是一个将 SVG 带入最新 react-native 的库。

【参考方案1】：

出于某种原因，我 从 package.json 文件中删除了所有依赖项并手动安装它们

yarn add react-native redux

其余的对我有用， 我发现问题出在已安装软件包的版本上。

【讨论】：

redux 在这里做什么？

【参考方案2】：

在 package.json 中使用它

"scripts": 
   "android": "node node_modules/react-native/local-cli/cli.js run-android"

而不是

"scripts": 
    "android": "react-native run-android"
 

【讨论】：

这成功了！但是你能告诉我什么是绝对路径吗？

【参考方案3】：

在我的情况下，这个问题是因为 npm 是使用自制软件安装的。可以在this gist 上找到有关此问题的描述以及如何解决它。总之，所需的修复是卸载所有 npm 全局安装的包，卸载节点，然后重新安装节点，然后重新安装 npm 而不使用 brew。

npm list -g --depth=0 # to list all your globally installed packages
rm -rf /usr/local/lib/node_modules
brew uninstall node
brew install node --without-npm
echo prefix=~/.npm-packages >> ~/.npmrc
curl -L https://www.npmjs.com/install.sh | sh

然后，您必须重新安装所有使用 npm install -g <package_name> 全局安装的 npm 包。

不幸的是，当我重新启动我的机器时，同样的问题再次发生。我目前的工作是遵循here 的建议，即

npm install --save-dev react-native-cli

欢迎对正在发生的事情进行任何解释。

【讨论】：

npm install --save-dev react-native-cli 为我修复了它。