Download picker - Download do código -fonte picker

picker

Outro código-fonte

v2.10.2

Baixar

`@react-native-picker/picker`

Android	iOS	Pickerios

Windows	Macos

Versões suportadas

@react-native-picker/picker	react-nativo	React-native-windows
> = 2.0.0	0,61+	0,64+
> = 1.16.0	0,61+	0,61+
> = 1.2.0	0,60+ ou 0,59+ com jetificador	N / D
> = 1.0.0	0,57	N / D

Começando

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

ou

$ yarn add @react-native-picker/picker

Para react nativo v0.60 e acima (automaticamente)

Como [email protected] e acima suporta automatizações, não há necessidade de executar o processo de vinculação. Leia mais sobre o AUTOLINING AQUI. Isso é suportado por [email protected] e acima.

iOS

Cocoapods no iOS precisa desta etapa extra:

 npx pod-install

Android

Nenhuma etapa adicional é necessária.

Windows (expanda para detalhes)

Windows

O uso no Windows sem automobilização requer as seguintes etapas extras:

Adicione o projeto `ReactNativePicker` à sua solução.

Abra a solução no Visual Studio 2019
Clique com o botão direito do mouse no ícone da solução no Solution Explorer> Adicionar> Projeto existente Selecione D:devRNTestnode_modules@react-native-pickerpickerwindowsReactNativePickerReactNativePicker.vcxproj

Windows/myApp.sln

Adicione uma referência ao ReactNativePicker ao seu projeto de aplicativo principal. Do Visual Studio 2019:

Clique com o botão direito do mouse no Projeto de Aplicativo Principal> Adicionar> Referência ... Verifique ReactNativePicker de projetos de solução.

App.cpp

Adicione #include "winrt/ReactNativePicker.h" aos cabeçalhos incluídos na parte superior do arquivo.

Adicione PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider()); antes do InitializeComponent(); .

Macos

Cocoapods no macOS precisam desta etapa extra (chamado do diretório macOS)

 pod install

Reaja o nativo abaixo de 0,60 (instalação manual e link)

As etapas a seguir são necessárias apenas se você estiver trabalhando com uma versão do React Native menor que 0,60

Instalação principalmente automática

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

Instalação manual

iOS

No Xcode, no navegador do projeto, clique com o botão direito do clique Libraries ➜ Add Files to [your project's name]
Vá para node_modules ➜ @react-native-picker/picker e adicione RNCPicker.xcodeproj
No Xcode, no navegador do projeto, selecione seu projeto. Adicione libRNCPicker.a às Build Phases do seu projeto ➜ Link Binary With Libraries
Execute seu projeto ( Cmd+R ) <

Android

Arquivo de aplicativo aberto ( android/app/src/main/java/[...]/MainApplication.java )

Adicionar import com.reactnativecommunity.picker.RNCPickerPackage; para as importações no topo do arquivo
Adicione new RNCPickerPackage() à lista retornada pelo método getPackages()

Anexe as seguintes linhas ao 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')

Insira as seguintes linhas dentro do bloco de dependências no android/app/build.gradle :
```
  implementation project(path: ':@react-native-picker_picker')
```

Macos

No Xcode, no navegador do projeto, clique com o botão direito do clique Libraries ➜ Add Files to [your project's name]
Vá para node_modules ➜ @react-native-picker/picker e adicione RNCPicker.xcodeproj
No Xcode, no navegador do projeto, selecione seu projeto. Adicione libRNCPicker.a às Build Phases do seu projeto ➜ Link Binary With Libraries
Execute seu projeto ( Cmd+R ) <

Suporte RTL

Você precisa adicionar android:supportsRtl="true" para AndroidManifest.xml

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

Uso

Importar seletor de @react-native-picker/picker :

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

Crie estado que será usado pelo Picker :

 const [ selectedLanguage , setSelectedLanguage ] = useState ( ) ;

Adicione Picker como este:

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

Se você deseja abrir/fechar o selecionador programaticamente no Android (disponível na versão 1.16.0+), passe para o 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 >

Adereços

View herdada Props ...

onValueChange
selectedValue
style
testID
enabled
mode
prompt
itemStyle
selectionColor

Referência

Adereços

`onValueChange`

Retorno de chamada para quando um item é selecionado. Isso é chamado com os seguintes parâmetros:

itemValue : o suporte value do item que foi selecionado
itemPosition : o índice do item selecionado neste seletor

Tipo	Obrigatório
função	Não

`selectedValue`

Valor de correspondência de valor de um dos itens. Pode ser uma string ou um número inteiro.

Tipo	Obrigatório
qualquer	Não

`style`

Tipo	Obrigatório
PickersTyleType	Não

`testID`

Usado para localizar essa visualização em testes de ponta a ponta.

Tipo	Obrigatório
corda	Não

`enabled`

Se definido como false, o seletor será desativado, ou seja, o usuário não poderá fazer uma seleção.

Tipo	Obrigatório	Plataforma
bool	Não	Android, Web, Windows

`mode`

No Android, especifica como exibir os itens de seleção quando o usuário toca no seletor:

'Diálogo': mostre uma caixa de diálogo modal. Este é o padrão.
'suspenso': mostra um suspensão ancorado à visualização do seletor

Tipo	Obrigatório	Plataforma
enum ('diálogo', 'suspenso')	Não	Android

`dropdownIconColor`

No Android, especifica a cor do triângulo suspenso. O valor de entrada deve ser o valor aceito pela função processColor nativa de reação.

Tipo	Obrigatório	Plataforma
ColorValue	Não	Android

`dropdownIconRippleColor`

No Android, especifica a cor da ondulação do triângulo suspenso. O valor de entrada deve ser o valor aceito pela função processColor nativa de reação.

Tipo	Obrigatório	Plataforma
ColorValue	Não	Android

`prompt`

String prompt para este seletor, usado no Android no modo de diálogo como o título da caixa de diálogo.

Tipo	Obrigatório	Plataforma
corda	Não	Android

`itemStyle`

Estilo a ser aplicado a cada um dos rótulos dos itens.

Tipo	Obrigatório	Plataforma
Estilos de texto	Não	iOS, Windows

`numberOfLines`

No Android & iOS, costumava truncar o texto com uma elipse após calcular o layout de texto, incluindo embrulho de linha, de modo que o número total de linhas não exceda esse número. O padrão é '1'

Tipo	Obrigatório	Plataforma
número	Não	Android, iOS

`onBlur`

Tipo	Obrigatório	Plataforma
função	Não	Android

`onFocus`

Tipo	Obrigatório	Plataforma
função	Não	Android

`selectionColor`

Tipo	Obrigatório	Plataforma
ColorValue	Não	iOS

Métodos

`blur` (apenas Android, Lib versão 1.16.0+)

Fecha programaticamente seletor

`focus` (apenas Android, Lib versão 1.16.0+)

Abre programaticamente o selecionador

PickeritemProps

Adereços que podem ser aplicados ao Picker.Item individual.Item

`label`

Valor exibido no item do seletor

Tipo	Obrigatório
corda	Sim

`value`

Valor real no item do seletor

Tipo	Obrigatório
número, string	Sim

`color`

Cor exibida no item do seletor

Tipo	Obrigatório
ColorValue	Não

`fontFamily`

Exibido FontFamily no item do seletor

Tipo	Obrigatório
corda	Não

`style`

Estilo a ser aplicado a etiquetas de itens individuais.

Tipo	Obrigatório	Plataforma
ViewStyleProp	Não	Android

`enabled`

Se definido como false, o item específico será desativado, ou seja, o usuário não poderá fazer uma seleção

@Default: true

Tipo	Obrigatório	Plataforma
booleano	Não	Android

`contentDescription`

Define a descrição do conteúdo para o item do seletor

Tipo	Obrigatório	Plataforma
corda	Não	Android

Pickerios

Adereços

View herdada Props ...
itemStyle
onValueChange
selectedValue
selectionColor
themeVariant

Referência

Adereços

`itemStyle`

Tipo	Obrigatório
Estilos de texto	Não

`onValueChange`

Tipo	Obrigatório
função	Não

`selectedValue`

Tipo	Obrigatório
qualquer	Não

`selectionColor`

Tipo	Obrigatório	Plataforma
ColorValue	Não	iOS

`themeVariant`

Tipo	Obrigatório
enum ('luz', 'escuro')	Não

Expandir

Informações adicionais

Versão v2.10.2
Tipo Outro código-fonte
Data da Última Atualização 2025-05-09
tamanho 2.36MB
Vindo de Github

Aplicativos Relacionados

Software Meal Picker+ original

2024-08-08

Recomendado para você

chat.petals.dev

Outro código-fonte

1.0.0
GPT Prompt Templates

Outro código-fonte

1.0.0
GPTyped

Outro código-fonte

GPTyped 1.0.5
Google Dorks

Outro código-fonte

1.0
shepherd

Outro código-fonte

v6.1.6-react-shepherd: Prepare Release (#3063)
mongo express

Outro código-fonte

v1.1.0-rc-3
Google Dorks

Outro código-fonte

1.0
shepherd

Outro código-fonte

v6.1.6-react-shepherd: Prepare Release (#3063)
mongo express

Outro código-fonte

v1.1.0-rc-3

Informações Relacionadas Todos

picker

@react-native-picker/picker

Versões suportadas

Começando

Para react nativo v0.60 e acima (automaticamente)

iOS

Android

Windows

Adicione o projeto ReactNativePicker à sua solução.

Windows/myApp.sln

App.cpp

Macos

Instalação principalmente automática

Instalação manual

iOS

Android

Macos

Suporte RTL

Uso

Adereços

Referência

Adereços

onValueChange

selectedValue

style

testID

enabled

mode

dropdownIconColor

dropdownIconRippleColor

prompt

itemStyle

numberOfLines

onBlur

onFocus

selectionColor

Métodos

blur (apenas Android, Lib versão 1.16.0+)

focus (apenas Android, Lib versão 1.16.0+)

PickeritemProps

label

value

color

fontFamily

style

enabled

contentDescription

Pickerios

Adereços

Referência

Adereços

itemStyle

onValueChange

selectedValue

selectionColor

themeVariant

`@react-native-picker/picker`

Adicione o projeto `ReactNativePicker` à sua solução.

`onValueChange`

`selectedValue`

`style`

`testID`

`enabled`

`mode`

`dropdownIconColor`

`dropdownIconRippleColor`

`prompt`

`itemStyle`

`numberOfLines`

`onBlur`

`onFocus`

`selectionColor`

`blur` (apenas Android, Lib versão 1.16.0+)

`focus` (apenas Android, Lib versão 1.16.0+)

`label`

`value`

`color`

`fontFamily`

`style`

`enabled`

`contentDescription`

`itemStyle`

`onValueChange`

`selectedValue`

`selectionColor`

`themeVariant`