不变冲突:尝试注册两个具有相同名称RNCAndroidDropdownPicker的视图

Question

导入并使用模块后，反应本地选择器：

import {Picker} from '@react-native-picker/picker';
<Picker
selectedValue={this.state.language}
style={{height: 50, width: 100}}
onValueChange={(itemValue, itemIndex) =>
this.setState({language: itemValue})
}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>   

我得到以下错误：

Invariant Violation: Tried to register two views with the same name RNCAndroidDropdownPicker

这里出了什么问题？

Answer 1

要消除这种情况，请执行以下操作：

由于错误是关于注册具有相同名称的两个视图，请以这种方式声明您的Picker：

import { Picker as SelectPicker } from '@react-native-picker/picker';

而不是import { Picker } from '@react-native-picker/picker';

并像这样实现：

<SelectPicker
selectedValue={this.state.language}
style={{ height: 50, width: 100 }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ language: itemValue })
}>
<SelectPicker.Item label="Java" value="java" />
<SelectPicker.Item label="JavaScript" value="js" />
</SelectPicker>

如果上述解决方案不起作用，请执行此

$ npm uninstall --save-dev @react-native-picker/picker
$ npm i @react-native-picker/picker --save
$ cd android
$ ./gradlew clean
$ cd ..
$ react-native run-android

更新：

这就是native-base的问题。卸载native-base并像这样重新安装：

$ npm uninstall native-base --save
$ npm install native-base --save

此问题已在最新版本的native-base中修复。

Answer 2

只需将native-base更新到最新版本，错误就会得到解决。

Answer 3

问题的原因对我来说

项目中使用的内部包依赖于@react-native-community/picker。我使用的是native-base:2.15.2，它依赖于@react-native-picker/picker。因此，@react-native-community/picker和@react-native-picker/picker之间存在冲突。

我是如何找到原因的

在package-lock.json文件中搜索picker，并找到上面给出的两个相关包。

解决方案

我选择了native-base:2.13.12的旧版本，它不依赖于@react-native-picker/picker。

为什么我决定选择不同版本的native-base:

1. 我无法更换内部包
2. 我没有在项目的任何地方直接使用Picker
3. 即使我使用了它，我也可以使用@react-native-community/picker提供的

我希望它能提供更好的见解。

干杯！

Answer 4

您遇到此问题尝试注册具有相同名称的两个视图RNCAndroidDropdownPicker问题，因为您的节点模块中安装了@react-native-community/datetimepicker包不止一个

我也遇到了同样的问题，下面的步骤解决了我的问题

Remove this -> node_modules -> native-base -> node_modules -> @react-native-community/datetimepicker
Remove this -> node_modules -> react-native-weekly-calendar -> node_modules -> @react-native-community/datetimepicker

如果你仍然得到同样的错误，那么你也要检查包含@react-native-community/datetimepicker包的库，你必须删除它，因为我们已经在node_modules中安装了一次，它将解决你的问题

Answer 5

问题是您已经导入了本机基础，并且它将Picker作为依赖项，只需使用：

import { Picker } from 'native-base';

Answer 6

在我的案例中，我曾尝试直接从React Native使用Picker，但它说它已被移动。所以我安装了另一个名为react-native-picker-select的软件包

在查看了我的package-lock.json后，我发现那里有很多Picker，这可能是它被混淆的原因，所以我所做的就是：

删除我的node_modules文件夹，停止服务器并执行npm安装，然后重新运行服务器，它工作

Answer 7

问题是您的react项目中可能存在名称为"Picker"的多个依赖项。

要识别具有相同名称的包，请尝试以下任何一种方法：

1. 如果使用智能编辑器，请尝试从导入中删除现有的Picker依赖项。并尝试自动重新导入。您将看到多个类似的选取器

• '@react native picker/picker'
• '@react本地社区/picker'
• '本地基础'

2. 或在"package.json"或"package-lock.json"中搜索选择器

一旦找到同名的依赖项，请在项目中更改为仅使用1个依赖项("@react native community/picker"one_answers"@react-native-picker/picker"几乎相同，因此选择任何一个，您只需在导入中更新依赖项即可(，然后使用以下命令卸载另一个依赖项。

npm uninstall <<package_name>> 

比如npm uninstall@react native community/picker。

并重新运行该项目。