Блог

После импорта и использования модуля react-native-picker:

 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
 

Что здесь пошло не так?

Чтобы избавиться от этого, выполните следующие действия:

Поскольку ошибка связана с регистрацией двух представлений с одинаковым именем, объявите ваше 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 .

Просто обновите native-base до последней версии, и ошибка будет устранена.

Причина проблемы для меня

Внутренний пакет, используемый в проекте, зависел от @react-native-community/picker . И я использовал native-base:2.15.2 , от которого зависел @react-native-picker/picker . Итак, возник конфликт между @react-native-community/picker и @react-native-picker/picker .

Как я нашел причину

Искал picker в файле package-lock.json и нашел два связанных пакета, указанных выше.

Решение

Я выбрал более старую версию native-base:2.13.12 , от которой не зависело @react-native-picker/picker .

Почему я решил выбрать другую версию native-base:

1. Я не смог заменить внутренний пакет.
2. Я не использовал Picker нигде в проекте напрямую.
3. Даже если бы я использовал его, я мог бы использовать тот, который предоставлен @react-native-community/picker .

Я надеюсь, что это дает лучшее представление.

Ура!

Проблема в том, что у вас импортирована собственная база, и у нее есть средство выбора в качестве зависимости, просто используйте:

import { Picker } from 'native-base';

Проблема в том, что у вас может быть множественная зависимость с именем ‘Picker’ в вашем проекте react.

Чтобы идентифицировать пакеты с одинаковыми именами, попробуйте любой из приведенных ниже способов :

1. Если вы используете smart editor, попробуйте удалить существующую зависимость от средства выбора из import. и попробуйте автоматический повторный импорт. Вы увидите несколько средств выбора, таких как

• ‘@react-native-picker / picker’
• ‘@react-native-community /picker’
• ‘native-base’

2. или найдите средство выбора в ‘package.json’ или ‘package-lock.json’.

Как только вы найдете зависимость с тем же именем, внесите изменения в свой проект, чтобы использовать только 1 зависимость (‘@react-native-community / picker’ и ‘@react-native-picker / picker’ почти одинаковы, поэтому выберите любой, и вам просто нужно обновить зависимость при импорте), затем используйте приведенную ниже команду и удалите другую зависимость.

 npm uninstall <<package_name>> 
 

как и npm, удалите @react-native-community / picker .

и повторно запустите проект.