Реализуйте выпадающие поля выбора в React Native с Formik

Как сделать выпадающие поля выбора в React Native с Formik

Выпадающие поля выбора - обычная функция во многих формах в мобильных и веб-приложениях. Они позволяют пользователю выбрать один элемент из списка похожих элементов. Это могут быть дни, месяцы, города, страны или любые другие категории. Эта статья покажет вам, как разместить раскрывающиеся поля выбора в React Native и Formik.

Шаг 1. Создайте новый проект, поддерживающий реакцию, с помощью expo. Назовите это SelectBoxApp

expo init SelectBoxApp

Шаг 2. Затем установите в приложение библиотеку Formik. Прочтите документацию Formik здесь.

npm install formik --save

Шаг 3. Установите Axios.

npm install axios --save

Шаг 4. Установите react-native-paper

npm install react-native-paper

Шаг 5. Установите response-native-community / picker.

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

См. Документацию @ response-native-community / picker здесь.

Шаг 6. Импортируйте реакцию в файл app.js.

import React from 'react';

Шаг 7. Импортируйте axios в файл app.js.

import axios from 'axios';

Шаг 8: Импортируйте компоненты View, Text и Alert из react-native в ваш app.js

import { View, Text, Alert} from 'react-native';

Шаг 9. Импортируйте компоненты Button, Title и TextInput из react-native-paper в ваш файл app.js

import { Button, Title, TextInput } from 'react-native-paper';

Шаг 10. Импортируйте ловушку useFormik из formik в файл app.js.

import { useFormik } from 'formik';

Шаг 11. Импортируйте средство выбора из @ response-native-community / picker в файл app.js.

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

Это полный список необходимого импорта.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { View, Text, Alert} from 'react-native';
import { Button } from 'react-native-paper';
import { useFormik } from 'formik';
import { Picker } from '@react-native-community/picker'

Шаг 12. Создайте постоянную переменную с именем App, которая будет содержать функцию жирной стрелки.

const App = () => {
  
};
  
export default App;

Шаг 13: внутри приложения создайте массив, который будет содержать параметры для нашего раскрывающегося списка выбора. Назовите это городами.

const cities = [
     {name:"Los Angeles", id: 1},
     {name:"Philadelphia", id: 2},
     {name:"Chicago", id: 3},
     {name:"Washington DC", id: 4},
     {name:"New York", id: 5},
     {name:"San Diego", id: 6},
     {name:"Fort Worth", id: 7},
     {name:"Houston", id: 8},
     {name:"Cleveland", id: 9},
     {name:"Pittsburg", id: 10},
     {name:"Detroit", id: 11},
     {name:"Jacksonville", id: 12},
     {name:"Denver", id: 13},
     {name:"Columbus", id: 14},
     {name:"El Paso", id: 15},
     {name:"New Orleans", id: 16},
     {name:"Cincinnati", id: 17},
     {name:"Nashville", id: 18},
     {name:"Miami", id: 19},
     {name:"Tampa", id: 20},
     {name:"Bakersfield", id: 22},
     {name:"Tuscon", id: 23},
     {name:"Baltimore", id: 25},
     {name:"St Louis", id: 26},
     {name:"Las Vegas", id: 27},
     {name:"Memphis", id: 28},
     {name:"Seatle", id: 29},
     {name:"San Fransisco", id: 30},
]

Шаг 14. Внутри приложения. Создайте постоянную переменную для хранения возвращаемого значения ловушки useFormik.

const formik = useFormik();

Шаг 15: Добавьте свойство city_name к свойству initialValues.

const formik = useFormik({
  initialValues: { city_name: '' },
});

Шаг 16. Для свойства onSubmit сделайте HTTP-запрос с помощью axios для отправки данных в конечную точку API.

const formik = useFormik({
   initialValues: { city_name: '' },
   onSubmit: values => {
     axios({
        method: 'post',
        url: <domain-name> + 'url',
        data: {
           'city_name': values.city_name},
        headers: {'Content-Type': 'application/json'}
         }).then(response => {
         }).catch(err => {
             Alert.alert('An error occurred!', err.message,
           [{ text: 'Okay' }]);
})}
});

В операторе возврата добавьте элемент выбора и элемент выбора.

return(
<View>
      <Picker 
            enabled={true} 
            mode="dropdown"
            placeholder="Select City"
            onValueChange={formik.handleChange('city_name')}
            selectedValue={formik.values.city_name}
      >
       {cities.map((item) => {
        return
          (<Picker.Item 
              label={item.name.toString()} 
              value={item.name.toString()} 
              key={item.id.toString()} />)
        })}
</Picker>
</View>
)

Шаг 17. Затем добавьте кнопку отправки под средством выбора.

return(
<View>
      <Picker 
            enabled={true} 
            mode="dropdown"
            placeholder="Select City"
            onValueChange={formik.handleChange('city_name')}
            selectedValue={formik.values.city_name}
      >
       {cities.map((item) => {
        return
          (<Picker.Item 
              label={item.name.toString()} 
              value={item.name.toString()} 
              key={item.id.toString()} />)
        })}
     </Picker>
     <Button 
            mode="contained" 
            title='submit' 
            onPress={formik.handleSubmit}
      >
        Enter
      </Button>
</View>
)

Окончательный файл app.js должен выглядеть так.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { View, Text, Alert} from 'react-native';
import { Button } from 'react-native-paper';
import { useFormik } from 'formik';
import { Picker } from '@react-native-community/picker'

const App = () => {
const cities = [
     {name:"Los Angeles", id: 1},
     {name:"Philadelphia", id: 2},
     {name:"Chicago", id: 3},
     {name:"Washington DC", id: 4},
     {name:"New York", id: 5},
     {name:"San Diego", id: 6},
     {name:"Fort Worth", id: 7},
     {name:"Houston", id: 8},
     {name:"Cleveland", id: 9},
     {name:"Pittsburg", id: 10},
     {name:"Detroit", id: 11},
     {name:"Jacksonville", id: 12},
     {name:"Denver", id: 13},
     {name:"Columbus", id: 14},
     {name:"El Paso", id: 15},
     {name:"New Orleans", id: 16},
     {name:"Cincinnati", id: 17},
     {name:"Nashville", id: 18},
     {name:"Miami", id: 19},
     {name:"Tampa", id: 20},
     {name:"Bakersfield", id: 22},
     {name:"Tuscon", id: 23},
     {name:"Baltimore", id: 25},
     {name:"St Louis", id: 26},
     {name:"Las Vegas", id: 27},
     {name:"Memphis", id: 28},
     {name:"Seatle", id: 29},
     {name:"San Fransisco", id: 30},
]
const formik = useFormik({
   initialValues: { city_name: '' },
   onSubmit: values => {
     axios({
        method: 'post',
        url: <domain-name> + 'url',
        data: {
           'city_name': values.city_name},
        headers: {'Content-Type': 'application/json'}
         }).then(response => {
         }).catch(err => {
             Alert.alert('An error occurred!', err.message,
           [{ text: 'Okay' }]);
})}
});
return(
<View>

      <Picker 
            enabled={true} 
            mode="dropdown"
            placeholder="Select City"
            onValueChange={formik.handleChange('city_name')}
            selectedValue={formik.values.city_name}
      >
       {cities.map((item) => {
        return
          (<Picker.Item 
              label={item.name.toString()} 
              value={item.name.toString()} 
              key={item.id.toString()} />)
        })}
     </Picker>
     <Button 
            mode="contained" 
            title='submit' 
            onPress={formik.handleSubmit}
      >
        Enter
      </Button>
</View>
)}
export default App;

Наконец, протестируйте приложение.

И вот оно. Надеюсь, вы нашли это полезным. Я вернусь с более интересными статьями. Спасибо за чтение.

Больше контента на plainenglish.io

Реализуйте выпадающие поля выбора в React Native с Formik

Как сделать выпадающие поля выбора в React Native с Formik

Похожие вопросы