Inicio>Relacionado con la programación>Otro código fuente
Descargar

@react-native-picker/picker

Androide iOS Pickerios
Windows Macosa

Versiones compatibles

@React-Native-Picker/Picker react-nativo reaccionamiento de algas nativas
> = 2.0.0 0.61+ 0.64+
> = 1.16.0 0.61+ 0.61+
> = 1.2.0 0.60+ o 0.59+ con jetificador N / A
> = 1.0.0 0.57 N / A

Empezando

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

o

$ yarn add @react-native-picker/picker

Para React Native V0.60 y superior (Autolinking)

Como [email protected] y arriba admite la autoleta, no es necesario ejecutar el proceso de enlace. Lea más sobre la autoleta aquí. Esto es compatible con [email protected] y superior.

iOS

Cocoapods en iOS necesita este paso adicional: 

 npx pod-install

Androide

No se requiere un paso adicional.

Windows (expandir para más detalles)

Windows

El uso en Windows sin egoísta requiere los siguientes pasos adicionales:

Agregue el proyecto ReactNativePicker a su solución.
  1. Abra la solución en Visual Studio 2019
  2. Haga clic con el botón derecho en la solución Icono en el explorador de soluciones> Agregar> Proyecto existente Seleccione D:devRNTestnode_modules@react-native-pickerpickerwindowsReactNativePickerReactNativePicker.vcxproj
Windows/myapp.sln

Agregue una referencia a ReactNativePicker a su proyecto de aplicación principal. De Visual Studio 2019:

Haga clic con el botón derecho Proyecto de aplicación principal> Agregar> Referencia ... Verifique ReactNativePicker de proyectos de solución.

app.cpp

Agregue #include "winrt/ReactNativePicker.h" a los encabezados incluidos en la parte superior del archivo.

Agregar PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider()); antes de InitializeComponent(); .

Macosa

Cocoapods on MacOS necesita este paso adicional (llamado desde el directorio de MacOS) 

 pod install
React Native por debajo de 0.60 (enlace e instalación manual)

Los siguientes pasos solo son necesarios si está trabajando con una versión de React Native inferior a 0.60

Mayormente instalación automática

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

Instalación manual

iOS

  1. En Xcode, en el Proyecto Navigator, haga clic derecho en Libraries ➜ Add Files to [your project's name]
  2. Vaya a node_modules ➜ @react-native-picker/picker y agregue RNCPicker.xcodeproj
  3. En Xcode, en el Proyecto Navegador, seleccione su proyecto. Agregar libRNCPicker.a a Build Phases de su proyecto ➜ Link Binary With Libraries
  4. Ejecute su proyecto ( Cmd+R ) <

Androide

  1. Abra el archivo de aplicación ( android/app/src/main/java/[...]/MainApplication.java )
  • Agregar import com.reactnativecommunity.picker.RNCPickerPackage; a las importaciones en la parte superior del archivo
  • Agregue new RNCPickerPackage() a la lista devuelta por el método getPackages()
  1. Agregue las siguientes líneas a 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. Inserte las siguientes líneas dentro del bloque de dependencias en android/app/build.gradle : 
      implementation project(path: ':@react-native-picker_picker')

Macosa

  1. En Xcode, en el Proyecto Navigator, haga clic derecho en Libraries ➜ Add Files to [your project's name]
  2. Vaya a node_modules ➜ @react-native-picker/picker y agregue RNCPicker.xcodeproj
  3. En Xcode, en el Proyecto Navegador, seleccione su proyecto. Agregar libRNCPicker.a a Build Phases de su proyecto ➜ Link Binary With Libraries
  4. Ejecute su proyecto ( Cmd+R ) <

Soporte RTL

Debe agregar android:supportsRtl="true" a AndroidManifest.xml 

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

Uso

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

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

Crear estado que será utilizado por el Picker : 

 const [ selectedLanguage , setSelectedLanguage ] = useState ( ) ;

Agregue Picker como este: 

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

Si desea abrir/cerrar Picker mediante programación en Android (disponible desde la versión 1.16.0+), pase la referencia a 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 >

Accesorios

  • Apps View hereditaria ...
  • onValueChange
  • selectedValue
  • style
  • testID
  • enabled
  • mode
  • prompt
  • itemStyle
  • selectionColor

Referencia

Accesorios

onValueChange

Devolución de llamada para cuando se selecciona un artículo. Esto se llama con los siguientes parámetros:

  • itemValue : el valor de value del elemento que se seleccionó
  • itemPosition : el índice del elemento seleccionado en este selector
Tipo Requerido
función No

selectedValue

Valor coincidente Valor de uno de los elementos. Puede ser una cadena o un entero.

Tipo Requerido
cualquier No

style

Tipo Requerido
Pickerstyletype No

testID

Se utiliza para localizar esta vista en pruebas de extremo a extremo.

Tipo Requerido
cadena No

enabled

Si se establece en False, el selector se deshabilitará, es decir, el usuario no podrá hacer una selección.

Tipo Requerido Plataforma
bool No Android, Web, Windows

mode

En Android, especifica cómo mostrar los elementos de selección cuando el usuario aprovecha el selector:

  • 'Diálogo': Muestre un diálogo modal. Este es el valor predeterminado.
  • 'desplegable': muestra un menú desplegable anclado a la vista del selector
Tipo Requerido Plataforma
enum ('diálogo', 'desplegable') No Androide

dropdownIconColor

En Android, especifica el color del triángulo desplegable. El valor de entrada debe ser un valor que se acepte por la función React-Native processColor .

Tipo Requerido Plataforma
Valor de colores No Androide

dropdownIconRippleColor

En Android, especifica el color ondulado del triángulo desplegable. El valor de entrada debe ser un valor que se acepte por la función React-Native processColor .

Tipo Requerido Plataforma
Valor de colores No Androide

prompt

Cadena de solicitud para este selector, utilizado en Android en modo de diálogo como título del cuadro de diálogo.

Tipo Requerido Plataforma
cadena No Androide

itemStyle

Estilo para aplicar a cada una de las etiquetas de los artículos.

Tipo Requerido Plataforma
estilos de texto No iOS, Windows

numberOfLines

En Android e iOS, se usa para truncar el texto con un elipsis después de calcular el diseño del texto, incluida la envoltura de línea, de modo que el número total de líneas no exceda este número. El valor predeterminado es '1'

Tipo Requerido Plataforma
número No Android, iOS

onBlur

Tipo Requerido Plataforma
función No Androide

onFocus

Tipo Requerido Plataforma
función No Androide

selectionColor

Tipo Requerido Plataforma
Valor de colores No iOS

Métodos

blur (solo Android, Lib Versión 1.16.0+)

Programáticamente cierra Picker

focus (solo Android, Lib Versión 1.16.0+)

Picker abre programáticamente

Pickeritemprops

Accesorios que se pueden aplicar al Picker.Item individual.

label

Valor mostrado en el elemento del selector

Tipo Requerido
cadena Sí

value

Valor real en el artículo del selector

Tipo Requerido
número, cadena Sí

color

Color que se muestra en el elemento del selector

Tipo Requerido
Valor de colores No

fontFamily

Fontfamilia mostrada en el elemento del selector

Tipo Requerido
cadena No

style

Estilo para aplicar a las etiquetas de artículos individuales.

Tipo Requerido Plataforma
ViewStyleProp No Androide

enabled

Si se establece en False, el elemento específico se deshabilitará, es decir, el usuario no podrá hacer una selección

@default: verdadero

Tipo Requerido Plataforma
booleano No Androide

contentDescription

Establece la descripción del contenido en el elemento del selector

Tipo Requerido Plataforma
cadena No Androide

Pickerios

Accesorios

  • Apps View hereditaria ...
  • itemStyle
  • onValueChange
  • selectedValue
  • selectionColor
  • themeVariant

Referencia

Accesorios

itemStyle

Tipo Requerido
estilos de texto No

onValueChange

Tipo Requerido
función No

selectedValue

Tipo Requerido
cualquier No

selectionColor

Tipo Requerido Plataforma
Valor de colores No iOS

themeVariant

Tipo Requerido
enum ('luz', 'oscuro') No
Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo