尝试注册两个具有相同名称RNGestureHandlerButton的视图

Question

我试图用{ createStackNavigator, createAppContainer }从react-navigation创建导航，但当启动我的应用程序时，我总是出错。我找不到任何关于这方面的文档或帮助。

这是我的package.json:

{ 
"main": "node_modules/expo/AppEntry.js", 
"scripts": { 
"start": "expo start", 
"android": "expo start --android", 
"ios": "expo start --ios", 
"eject": "expo eject" 
}, 
"dependencies": { 
"expo": "^32.0.0", 
"react": "16.5.0", 
"react-native": "github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-gesture-handler": "^1.0.15", 
"react-navigation": "^3.0.9" 
}, 
"devDependencies": { 
"babel-preset-expo": "^5.0.0" 
}, 
"private": true 
}

Answer 1

注意，这个答案是为Expo v33编写的。请查看react导航的当前文档以及您正在使用的Expo版本，以获取最新的安装说明。

错误的原因是您在Expo应用程序中使用了react-navigation，但您错误地遵循了教程。

https://reactnavigation.org/docs/en/getting-started.html

如果您阅读了说明，它会告诉您，一旦安装了react-navigation，就应该安装react-native-gesture-handler。然而，这不是他们所说的

接下来，安装react本机手势处理程序。如果你正在使用Expo不需要在这里做任何事情，它包含在SDK中。

它说，如果您正在使用Expo，则不需要安装react-native-gesture-handler，因为它已经安装。

您会遇到错误，因为您已经安装了react-native-gesture-handler，它已经存在于Expo中，并且Expo对从哪里获取信息感到困惑。

要解决您的问题，请执行以下操作。

1. 关闭所有运行Expo的终端
2. 关闭运行Expo的浏览器窗口
3. 从设备上的Expo应用程序中清除您正在处理的项目
4. 删除您的package-lock.json
5. 删除您的node_modules文件夹
6. 从package.json中删除react-native-gesture-handler条目
7. 运行npm i
8. 使用expo start -c重新启动Expo

使用Expo时要小心，很容易安装无法与之一起运行的依赖项，并导致类似的问题。

Answer 2

对于其他来到这里搜索的人：
"无法解析"react native手势处理程序"来自"node_modules@react-navigation\native\src\Scrollables.js">

我在这里找到了答案：
https://github.com/expo/expo/issues/5107

如果您使用Expo SDK 34+，不管旧线程怎么说，您都需要运行以下程序才能使其正常工作：
expo install react-native-gesture-handler

Answer 3

安装的react原生手势处理程序包和另一个作为安装的不同程序包的依赖项引入的程序包之间存在冲突，这两个程序包肯定是不同的版本。

解决方案转到您的package-lock.json，找到react原生手势处理程序实例。找到作为不同包的依赖项拉入的，即在我的情况下：

node_modules/@rainbow-me/animated-charts/node_modules/react-native-gesture-handler": {
3027       "version": "1.10.3",
"}

这是引入了有问题的react本机手势处理程序包。转到node_modules并删除该版本的react本机手势处理程序，然后重新启动服务器。

Answer 4

所以我使用expo SDK32，也遇到了同样的问题。

我试过了：

1. rm -rf node_modules && npm install运气不佳
2. 从你的package.json中删除react-native-gesture-handler，然后做rm -rf node_modules && npm install，运气不好

我成功地确保了我的react-native-gesture-handler版本只允许在semver中更改补丁。

旧包.json行 (发生名称冲突错误时)：

"react-native-gesture-handler": "^1.0.12",

(此处的^告诉npm跳到安装版本1.4.1的最高次要版本)

新软件包.json行 (为我修复了错误):

"react-native-gesture-handler": "~1.0.12",

(此处的~告诉npm只撞击最高的补丁版本，该版本安装了1.0.17，错误消失了)

我假设发生了某种碰撞，有不同的小版本？

我想这就是@feihcsim在回答中所说的。

Answer 5

如果您没有使用expo并看到此错误，那么您可能使用的组件返回的是TouchableOpacity。您可能会遇到同样的错误，并且还会发生多个脚本绑定。修复将TouchableOpacity包裹在视图中的问题。

Answer 6

根据@Andrew的回答，这个问题有时甚至可能比额外手动安装react-native-gesture-handler更微妙：对我来说，我发现我最近更新的一个包包含了他们自己的react-native-gesture-handler副本作为依赖项(通过搜索我的yarn.lock、package-lock.json、node_modules等发现)，所以我不得不将该包降级为不依赖react-native-gesture-handler的版本。。

Answer 7

我没有使用expo，我也遇到了同样的问题。我通过进入我的package-lock.json文件并找到react-native-gesture-handler来修复它，并删除了带有依赖项的整个包。之后，在node_modules文件夹中，我删除了名为react-native-gesture-handler的文件夹。现在，npm install react-native-gesture-handler为我工作。

Answer 8

对于expo，请尝试以下操作：

expo install react本地安全区上下文
yarn或npm install

Answer 9

如果您使用Expo构建您的react原生应用程序，则不必从npm或yarn导入react原生手势处理程序。它已经在世博会的包装中了。如果导入包，您将遇到此错误。

Answer 10

对于非Expo应用程序，上面给出的解决方案确实有效。因此，对于在ANDROIDStudio中制作的react本机应用程序，以下是解决方案：-

• 将您的react本机链接依赖关系版本替换为当前最新的最新版本是2.1.1，这给出了此错误，将其替换为此链接版本"https://github.com/xcarpentier/react-native-linkedin.git"随着所需的更改
• 删除并重新安装node_module
• 安装后，从中删除WEBVIEW文件夹"react native linked"；在nodemodule中手动或编写package.json文件中脚本中的行：CCD_ 43之后；"开始"；键

Answer 11

我使用expo45，正如我在文档中看到的，我需要运行

expo install react-native-gesture-handler，

然后在App.js中添加import 'react-native-gesture-handler';，然后我可以导入并在任何地方使用它，比如：

import { TapGestureHandler, RotationGestureHandler } from 'react-native-gesture-handler';
class ComponentName extends Component {
render() {
return (
<TapGestureHandler>
<RotationGestureHandler>...</RotationGestureHandler>
</TapGestureHandler>
);
}
}

Answer 12

我有一个博览会项目

似乎问题出在react本地安全区域上下文上

我所做的只是

yarn add react-native-safe-area-context

它起作用了(我已经安装了它，但我想Yarn为我解决了一些其他问题)

Answer 13

@rainbow me/animated charts 的另一个解决方案

转到package-lock.json并查看手势处理程序的版本

---

"；node_modules/@rainbow me/animated charts"：{。"依赖关系"：{"反应本地手势处理程序"："1.7.0"；，}，

---

然后转到package.json并替换版本"依赖关系"：{。"反应本地手势处理程序"："1.7.0"；}，

终端问题中npm更新

Answer 14

这就是我遇到这个错误后的工作原理。

您会遇到错误，因为您安装了react原生手势处理程序，它已经存在于Expo中，并且Expo对从哪里获取信息感到困惑。

如何解决这个问题：

1. 停止服务器(ctrl+c)

2. 在你的终端上运行这个：

   npm卸载反应本机手势处理程序

3. 然后使用npm启动重新运行服务器