[Anderson Paraibano]

RESUMO: Neste artigo, vamos explorar como mostrar o item selecionado para cada componente Picker em um aplicativo React Native utilizando a API react-native-picker-select. Vamos abordar como implementar essa funcionalidade de forma reativa e datilografada, aproveitando as vantagens do TypeScript.

Introdução
Os componentes Picker são elementos comuns em aplicativos móveis que permitem aos usuários selecionar um item de uma lista suspensa. Ao trabalhar com a biblioteca React Native, podemos utilizar a API react-native-picker-select para criar esses componentes com facilidade. No entanto, pode ser necessário exibir o item selecionado de forma clara para o usuário. Neste artigo, aprenderemos como alcançar esse objetivo.

Configuração do ambiente
Antes de prosseguirmos, certifique-se de ter o ambiente React Native configurado em seu sistema. Isso inclui a instalação do Node.js, do React Native CLI e do Android Studio ou Xcode, dependendo da plataforma em que você está desenvolvendo.

Instalação do react-native-picker-select
Primeiro, vamos instalar o pacote react-native-picker-select em nosso projeto. Abra um terminal na raiz do seu projeto React Native e execute o seguinte comando:

bash
Copy code
npm install react-native-picker-select
Importando o componente PickerSelect
Em seu componente React Native, importe o componente PickerSelect da biblioteca react-native-picker-select:

javascript
Copy code
import PickerSelect from ‘react-native-picker-select’;
Implementando o componente PickerSelect
Vamos criar um exemplo básico para demonstrar o uso do PickerSelect. Suponha que você tenha um array de opções que deseja exibir no seletor e queremos exibir o item selecionado em um elemento de texto. Aqui está um exemplo de código:

javascript
Copy code
import React, { useState } from ‘react’;
import { View, Text } from ‘react-native’;
import PickerSelect from ‘react-native-picker-select’;

const App = () => {
const options = [
{ label: ‘Opção 1’, value: ‘option1’ },
{ label: ‘Opção 2’, value: ‘option2’ },
{ label: ‘Opção 3’, value: ‘option3’ },
];

const [selectedOption, setSelectedOption] = useState(”);

return (
<View>
<PickerSelect
items={options}
onValueChange={(value) => setSelectedOption(value)}
value={selectedOption}
/>
<Text>O item selecionado é: {selectedOption}</Text>
</View>
);
};

export default App;
Explicação do código
Neste exemplo, importamos o componente PickerSelect e definimos um array options com as opções disponíveis para o seletor. Em seguida, usamos o useState para criar um estado selectedOption, que armazenará o valor do item selecionado.

Dentro do componente, renderizamos o PickerSelect, passando as propriedades items, onValueChange e value. A propriedade items recebe o array options que definimos anteriormente. A propriedade onValueChange é um callback que é chamado sempre que um novo valor é selecionado no seletor, atualizando o estado selectedOption. A propriedade value recebe o valor atual do item selecionado.

Por fim, renderizamos um elemento de texto <Text> que exibe o valor do item selecionado.

Conclusão
Neste artigo, exploramos como mostrar o item selecionado para cada componente Picker em um aplicativo React Native. Utilizando a API react-native-picker-select, conseguimos criar um seletor reativo e datilografado, permitindo que os usuários vejam o item selecionado de forma clara. Espero que este artigo tenha sido útil e que você possa aplicar esses conceitos em seus próprios projetos React Native.

[Autor]

Posts