Главная страница>Связанные с программированием>Другой исходный код
Скачать

@react-native-picker/picker

Android ios Пикериос
Окна MacOS

Поддерживаемые версии

@React-Native-Picker/Picker реагируемый Реактивные родные
> = 2,0,0 0,61+ 0,64+
> = 1.16.0 0,61+ 0,61+
> = 1.2.0 0,60+ или 0,59+ с Jetifier N/a
> = 1,0,0 0,57 N/a

Начиная

$ npm install @react-native-picker/picker --save

или

$ yarn add @react-native-picker/picker

Для реагирования Native V0.60 и выше (автолизование)

Поскольку [email protected] и выше поддерживает автоматическое использование, не нужно запускать процесс связывания. Узнайте больше о аутоизоляции здесь. Это поддерживается [email protected] и выше.

ios

Кокопод на iOS нуждаются в этом дополнительном шаге: 

 npx pod-install

Android

Не требуется дополнительного шага.

Windows (разверните подробности)

Окна

Использование в окнах без автоматического изготовления требует следующих дополнительных шагов:

Добавьте проект ReactNativePicker в свое решение.
  1. Откройте решение в Visual Studio 2019
  2. Значок решения правой кнопкой D:devRNTestnode_modules@react-native-pickerpickerwindowsReactNativePickerReactNativePicker.vcxproj
Windows/myapp.sln

Добавьте ссылку на ReactNativePicker в ваш основной проект приложения. От Visual Studio 2019:

Щелкните правой кнопкой мыши проект основного приложения> Добавить> Справочник ... Проверьте ReactNativePicker из проектов решений.

app.cpp

Добавьте #include "winrt/ReactNativePicker.h" в заголовки, включенные в верхнюю часть файла.

Добавить PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider()); Перед InitializeComponent(); Полем

MacOS

Кокоподы на macOS нуждаются в этом дополнительном шаге (вызванный из каталога macOS) 

 pod install
Реагировать родной ниже 0,60 (ссылка и ручная установка)

Следующие шаги необходимы только в том случае, если вы работаете с версией Rayact Native ниже 0,60

В основном автоматическая установка

$ react-native link @react-native-picker/picker

Ручная установка

ios

  1. В XCode, в Project Navigator, Libraries правой кнопкой мыши ➜ Add Files to [your project's name]
  2. Перейдите к node_modules ➜ @react-native-picker/picker и добавьте RNCPicker.xcodeproj
  3. В XCode, в Project Navigator, выберите свой проект. Добавить libRNCPicker.a к Build Phases вашего проекта ➜ Link Binary With Libraries
  4. Запустите свой проект ( Cmd+R ) <

Android

  1. Открыть файл приложения ( android/app/src/main/java/[...]/MainApplication.java .
  • Добавить import com.reactnativecommunity.picker.RNCPickerPackage; в импорт в верхней части файла
  • Добавить new RNCPickerPackage() в список, возвращенный методом getPackages()
  1. Добавьте следующие строки в android/settings.gradle : 
     include ':@react-native-picker_picker'
project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-picker/picker/android')
  2. Вставьте следующие строки внутри блока зависимостей в android/app/build.gradle : 
      implementation project(path: ':@react-native-picker_picker')

MacOS

  1. В XCode, в Project Navigator, Libraries правой кнопкой мыши ➜ Add Files to [your project's name]
  2. Перейдите к node_modules ➜ @react-native-picker/picker и добавьте RNCPicker.xcodeproj
  3. В XCode, в Project Navigator, выберите свой проект. Добавить libRNCPicker.a к Build Phases вашего проекта ➜ Link Binary With Libraries
  4. Запустите свой проект ( Cmd+R ) <

Поддержка RTL

Вам нужно добавить android:supportsRtl="true" to AndroidManifest.xml 

   < application
      ...
      android : supportsRtl = " true " >

Использование

Импортный сборщик из @react-native-picker/picker : 

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

Создайте состояние, которое будет использоваться Picker : 

 const [ selectedLanguage , setSelectedLanguage ] = useState ( ) ;

Добавьте Picker как это: 

 < Picker
  selectedValue = { selectedLanguage }
  onValueChange = { ( itemValue , itemIndex ) =>
    setSelectedLanguage ( itemValue )
  } >
  < Picker . Item label = "Java" value = "java" />
  < Picker . Item label = "JavaScript" value = "js" />
</ Picker >

Если вы хотите открыть/закрыть Picker программно на Android (доступно в версии 1.16.0+), перенесите Ref к Picker : 

 const pickerRef = useRef ( ) ;

function open ( ) {
  pickerRef . current . focus ( ) ;
}

function close ( ) {
  pickerRef . current . blur ( ) ;
}

return < Picker
  ref = { pickerRef }
  selectedValue = { selectedLanguage }
  onValueChange = { ( itemValue , itemIndex ) =>
    setSelectedLanguage ( itemValue )
  } >
  < Picker . Item label = "Java" value = "java" />
  < Picker . Item label = "JavaScript" value = "js" />
</ Picker >

Реквизит

  • Унаследованное представление для View ...
  • onValueChange
  • selectedValue
  • style
  • testID
  • enabled
  • mode
  • prompt
  • itemStyle
  • selectionColor

Ссылка

Реквизит

onValueChange

Обратный вызов, когда выбран элемент. Это вызывается со следующими параметрами:

  • itemValue : значение value выбранного элемента
  • itemPosition : индекс выбранного элемента в этом сборщике
Тип Необходимый
функция Нет

selectedValue

Значение сопоставления стоимости одного из элементов. Может быть строкой или целым числом.

Тип Необходимый
любой Нет

style

Тип Необходимый
PickersTyletype Нет

testID

Используется для поиска этого представления в сквозных тестах.

Тип Необходимый
нить Нет

enabled

Если установить на False, сборщик будет отключен, то есть пользователь не сможет сделать выбор.

Тип Необходимый Платформа
буль Нет Android, Web, Windows

mode

На Android указывает, как отобразить элементы выбора, когда пользователь нажимает на сборщика:

  • «Диалог»: показать модальный диалог. Это дефолт.
  • «Выпачающийся»: показывает раскрывающееся якорь, привязанный к представлению Picker
Тип Необходимый Платформа
enum ('Dialog', 'выпадение') Нет Android

dropdownIconColor

На Android указывает цвет выпадающего треугольника. Входное значение должно быть значением, которое принимается в рамках функции processColor -процесса.

Тип Необходимый Платформа
ColorValue Нет Android

dropdownIconRippleColor

На Android указывает волновой цвет раскрывающегося треугольника. Входное значение должно быть значением, которое принимается в рамках функции processColor -процесса.

Тип Необходимый Платформа
ColorValue Нет Android

prompt

Пригласить строку для этого сборщика, используемого на Android в режиме диалога в качестве заголовка диалога.

Тип Необходимый Платформа
нить Нет Android

itemStyle

Стиль, чтобы применить к каждой из меткеров элементов.

Тип Необходимый Платформа
текстовые стили Нет iOS, Windows

numberOfLines

На Android & IOS используется для усечения текста с помощью эллипсиса после вычисления текстового макета, включая обертывание линии, так что общее количество строк не превышает этого числа. По умолчанию «1»

Тип Необходимый Платформа
число Нет Android, iOS

onBlur

Тип Необходимый Платформа
функция Нет Android

onFocus

Тип Необходимый Платформа
функция Нет Android

selectionColor

Тип Необходимый Платформа
ColorValue Нет ios

Методы

blur (только Android, LIB версия 1.16.0+)

Программно закрывает Picker

focus (только Android, LIB версия 1.16.0+)

Программно открывает Picker

PickeritemProps

Реквизит, который может быть применен к отдельному Picker.Item

label

Отображаемое значение в элементе сборщика

Тип Необходимый
нить Да

value

Фактическое значение на элементе сборщика

Тип Необходимый
номер, строка Да

color

Отображаемый цвет на предмете сборщика

Тип Необходимый
ColorValue Нет

fontFamily

Отображается на подборе на элементе Picker

Тип Необходимый
нить Нет

style

Стиль, чтобы применить к отдельным меткам предметов.

Тип Необходимый Платформа
ViewStyleProp Нет Android

enabled

Если установить FALSE, конкретный элемент будет отключен, то есть пользователь не сможет сделать выбор

@default: true

Тип Необходимый Платформа
логический Нет Android

contentDescription

Устанавливает описание контента в элемент Picker

Тип Необходимый Платформа
нить Нет Android

Пикериос

Реквизит

  • Унаследованное представление для View ...
  • itemStyle
  • onValueChange
  • selectedValue
  • selectionColor
  • themeVariant

Ссылка

Реквизит

itemStyle

Тип Необходимый
текстовые стили Нет

onValueChange

Тип Необходимый
функция Нет

selectedValue

Тип Необходимый
любой Нет

selectionColor

Тип Необходимый Платформа
ColorValue Нет ios

themeVariant

Тип Необходимый
enum («свет», «темный») Нет
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все