Picker

O componente Picker em React Native é usado para criar uma lista suspensa de opções para os usuários selecionarem. É uma maneira comum de coletar informações dos usuários em formulários ou configurações. Aqui está um exemplo básico de como usar o componente Picker:

import React, { useState } from 'react';
import { View, Picker, StyleSheet, Text } from 'react-native';

const MeuComponente = () => {
  const [selectedValue, setSelectedValue] = useState('java');

  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
        style={styles.picker}
      >
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="javascript" />
        <Picker.Item label="Python" value="python" />
        <Picker.Item label="Ruby" value="ruby" />
      </Picker>
      <Text>Você escolheu: {selectedValue}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  picker: {
    height: 50,
    width: 150,
  },
});

export default MeuComponente;

Neste exemplo, Picker é usado para criar uma lista suspensa com quatro opções (“Java”, “JavaScript”, “Python” e “Ruby”). O estado selectedValue controla qual opção é exibida e é atualizado quando o usuário seleciona uma opção. A função onValueChange é chamada sempre que uma nova opção é selecionada.

Props Importantes do Picker:

• selectedValue: O valor da opção atualmente selecionada.
• onValueChange: Função chamada quando o usuário seleciona uma nova opção.
• style: Estilos para o componente Picker.
• mode: Modo de exibição do Picker (pode ser “dialog” ou “dropdown” no Android).
• prompt: Mensagem de orientação exibida acima do Picker no Android.

Lembre-se de que o Picker do React Native tem comportamentos diferentes em dispositivos iOS e Android. É importante testar seu aplicativo em ambas as plataformas para garantir que o componente Picker funcione conforme o esperado.