Componente React Native Picker

En este artículo, vamos a ver cómo crear un selector en react-native . Para ello, vamos a utilizar el componente Picker. Se utiliza para seleccionar un elemento en particular de múltiples opciones dadas. Básicamente, es como una lista desplegable.

Sintaxis:

<Picker>
    <Picker.Item />
    <Picker.Item />
    <Picker.Item />
</Picker>

Accesorios en Picker: 

• habilitado: si es falso, el usuario no podrá realizar una selección.
• itemStyle: Se utiliza para dar estilo a la etiqueta del artículo.
• modo: Decide cómo se mostrarán los elementos seleccionados, y solo está disponible en la plataforma Android.
• onValueChange: es una función de devolución de llamada cuando se selecciona el elemento, y toma dos argumentos, primero se cambia el valor y el segundo es el índice del elemento.
• indicador: se muestra como un título del cuadro de diálogo y solo está disponible en la plataforma Android.
• selectedValue: Muestra el valor seleccionado.
• estilo: básicamente le da estilo al selector.
• testID: Se utiliza para ubicar esta vista en pruebas de extremo a extremo.

Ahora comencemos con la implementación:

Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

npm install -g expo-cli

Paso 2: ahora cree un proyecto con el siguiente comando.

expo init myapp

Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

cd myapp

Paso 4: para el selector, tenemos un componente selector en React Native, pero ese componente ahora está obsoleto . Entonces, en sustitución de esto, vamos a usar un paquete externo llamado react-native-picker. Instale ese paquete usando el siguiente comando.

npm install @react-native-picker/picker

Estructura del proyecto:

Ejemplo: Ahora implementemos el Selector. Aquí creamos un selector de cursos.

Aplicación.js

import React , {useState} from 'react';
import { StyleSheet, View} from 'react-native';
import {Picker} from "@react-native-picker/picker";
export default function App() {
  
  const [Enable , setEnable]  = useState("courses");
  
  return (
    <View style={styles.container}>
        <Picker
          selectedValue={Enable}
          style={{ height: 50, width: 250 }}
          mode={"dialog"}
          onValueChange={(itemValue) => setEnable(itemValue)}
        >
           // Items
          <Picker.Item label="Courses" value="courses" />
          <Picker.Item label="Data-Structures" value="DSA" />
          <Picker.Item label="ReactJs" value="react" />
          <Picker.Item label="C++" value="cpp" />
          <Picker.Item label="Python" value="py" />
          <Picker.Item label="Java" value="java" />
        </Picker>
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/picker