Data types

10 мин

парсинг типов данных в компоненте react native введение в сердце функции parse core находится управление объектами данных parse позволяет вам хранить и запрашивать свои данные просто, используя его sdk или api (rest или graphql) все функции объектов данных построены с использованием класса \parse object\ , поля которого могут содержать пары ключ значение нескольких совместимых с json типов данных основные типы данных, которые могут быть назначены полям объекта, следующие \число\ целое (42) или дробное (42 5) числа, при условии, что ‘ ’ является десятичным разделителем; \логическое\ значения true или false; \строка\ строка, длина которой может составлять до 2147483647 символов имейте в виду, что такие большие значения замедляют операции с данными; \datetime\ \datetime\ объекты, хранящиеся в формате utc по умолчанию если вам нужно использовать другой часовой пояс, конверсия должна выполняться вручную; \массив\ массив, содержащий данные в любом совместимом с parse формате \объект\ json объект, также содержащий любые данные parse когда доступно в sdk, вызов \include()\ принесет детали из свойства объекта когда вы выбираете использовать тип array, мы рекомендуем держать объекты массива небольшими, так как это может повлиять на общую производительность ваших операций с данными наша рекомендация использовать тип array, если он не превышает 20 элементов и не растет со временем вместо типа array вы можете использовать типы pointer и relations в качестве альтернативы в этом руководстве вы узнаете, как хранить данные в каждом из основных типов данных, перечисленных выше вы создадите компонент регистрации продукта в react native, который покажет вам, как форматировать, конвертировать и сохранять данные на вашем parse server в react native parse также предлагает типы данных \geopoint\ для использования возможностей геолокационных ресурсов, а также специфические для parse реляционные данные, используя типы \pointer\ или \relation\ вы увидите оба типа в следующих руководствах предварительные условия чтобы завершить этот учебник, вам потребуется приложение react native, созданное и подключенное к back4app https //www back4app com/docs/react native/parse sdk/react native sdk если вы хотите протестировать/использовать макет экрана, предоставленный этим руководством, вам следует установить \react native paper\ библиотеку https //github com/callstack/react native paper цель понять основные типы данных, совместимые с parse, и сохранить каждый тип данных в parse из компонента react native 1 компонент создания продукта сначала создадим структуру компонента давайте сделаем это просто и создадим экран формы с одним текстовым полем для каждого типа данных, одним переключателем и кнопкой отправки для сохранения объекта эти поля будут собирать ваши \продукт\ значения полей имя( \строка\ ), количество( \число\ ), цена( \число\ ), доступно( \логическое\ ), дата истечения( \датавремя\ ), и категории( \массив\ ) также вы сохраните дополнительное \объект\ поле в вашем методе сохранения, но для этого не потребуется поле ввода создайте отдельный компонент в файле под названием \productcreation js/productcreation tsx\ , включая следующий код, или добавьте его в ваш основной файл приложения ( \app js/app tsx\ или \index js\ ) вы можете использовать этот макет с полными стилями, используя \react native paper\ или настроить свою собственную форму productcreation js 1 import react, {usestate} from 'react'; 2 import { 3 alert, 4 image, 5 safeareaview, 6 statusbar, 7 stylesheet, 8 view, 9 } from 'react native'; 10 import parse from 'parse/react native'; 11 import { 12 button as paperbutton, 13 switch as paperswitch, 14 text as papertext, 15 textinput as papertextinput, 16 } from 'react native paper'; 17	 18 export const productcreation = () => { 19 // state variables 20 const \[productname, setproductname] = usestate(''); 21 const \[productquantity, setproductquantity] = usestate(''); 22 const \[productprice, setproductprice] = usestate(''); 23 const \[productavailable, setproductavailable] = usestate(false); 24 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 25 const \[productcategories, setproductcategories] = usestate(''); 26	 27 const toggleproductavailable = () => setproductavailable(!productavailable); 28	 29 return ( 30 <> 31 \<statusbar backgroundcolor="#208aec" /> 32 \<safeareaview style={styles container}> 33 \<view style={styles header}> 34 \<image 35 style={styles header logo} 36 source={ { uri 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', } } 37 /> 38 \<papertext style={styles header text bold}> 39 {'react native on back4app'} 40 \</papertext> 41 \<papertext style={styles header text}>{'product creation'}\</papertext> 42 \</view> 43 \<view style={styles wrapper}> 44 {/ boolean type input /} 45 \<view style={styles switch container}> 46 \<papertext>{'available?'}\</papertext> 47 \<paperswitch 48 value={productavailable} 49 onvaluechange={toggleproductavailable} 50 /> 51 \</view> 52 {/ string type input /} 53 \<papertextinput 54 value={productname} 55 onchangetext={(text) => setproductname(text)} 56 label="name" 57 mode="outlined" 58 style={styles form input} 59 /> 60 {/ number type input (integer) /} 61 \<papertextinput 62 value={productquantity} 63 onchangetext={(text) => setproductquantity(text)} 64 label="quantity" 65 mode="outlined" 66 keyboardtype={'number pad'} 67 style={styles form input} 68 /> 69 {/ number type input (float) /} 70 \<papertextinput 71 value={productprice} 72 onchangetext={(text) => setproductprice(text)} 73 label="price" 74 mode="outlined" 75 keyboardtype={'numeric'} 76 style={styles form input} 77 /> 78 {/ date type input /} 79 \<papertextinput 80 value={productexpirationdate} 81 onchangetext={(text) => setproductexpirationdate(text)} 82 label="expiration date (mm/dd/yyyy)" 83 mode="outlined" 84 keyboardtype={'numbers and punctuation'} 85 style={styles form input} 86 /> 87 {/ array type input /} 88 \<papertextinput 89 value={productcategories} 90 onchangetext={(text) => setproductcategories(text)} 91 label="categories (separated by commas)" 92 mode="outlined" 93 style={styles form input} 94 /> 95 {/ product create button /} 96 \<paperbutton 97 onpress={() => createproduct()} 98 mode="contained" 99 icon="plus" 100 style={styles submit button}> 101 {'create product'} 102 \</paperbutton> 103 \</view> 104 \</safeareaview> 105 \</> 106 ); 107 }; 108	 109 // these define the screen component styles 110 const styles = stylesheet create({ 111 container { 112 flex 1, 113 backgroundcolor '#fff', 114 }, 115 wrapper { 116 width '90%', 117 alignself 'center', 118 }, 119 header { 120 alignitems 'center', 121 paddingtop 10, 122 paddingbottom 20, 123 backgroundcolor '#208aec', 124 }, 125 header logo { 126 width 170, 127 height 40, 128 marginbottom 10, 129 resizemode 'contain', 130 }, 131 header text bold { 132 color '#fff', 133 fontsize 14, 134 fontweight 'bold', 135 }, 136 header text { 137 margintop 3, 138 color '#fff', 139 fontsize 14, 140 }, 141 form input { 142 height 44, 143 marginbottom 16, 144 backgroundcolor '#fff', 145 fontsize 14, 146 }, 147 switch container { 148 flexdirection 'row', 149 alignitems 'center', 150 justifycontent 'space between', 151 paddingvertical 12, 152 marginbottom 16, 153 borderbottomwidth 1, 154 borderbottomcolor 'rgba(0, 0, 0, 0 3)', 155 }, 156 submit button { 157 width '100%', 158 maxheight 50, 159 alignself 'center', 160 backgroundcolor '#208aec', 161 }, 162 }); productcreation tsx 1 import react, {fc, reactelement, usestate} from 'react'; 2 import { 3 alert, 4 image, 5 safeareaview, 6 statusbar, 7 stylesheet, 8 view, 9 } from 'react native'; 10 import parse from 'parse/react native'; 11 import { 12 button as paperbutton, 13 switch as paperswitch, 14 text as papertext, 15 textinput as papertextinput, 16 } from 'react native paper'; 17	 18 export const productcreation fc<{}> = ({}) reactelement => { 19 // state variables 20 const \[productname, setproductname] = usestate(''); 21 const \[productquantity, setproductquantity] = usestate(''); 22 const \[productprice, setproductprice] = usestate(''); 23 const \[productavailable, setproductavailable] = usestate(false); 24 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 25 const \[productcategories, setproductcategories] = usestate(''); 26	 27 const toggleproductavailable = () => setproductavailable(!productavailable); 28	 29 return ( 30 <> 31 \<statusbar backgroundcolor="#208aec" /> 32 \<safeareaview style={styles container}> 33 \<view style={styles header}> 34 \<image 35 style={styles header logo} 36 source={ { uri 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', } } 37 /> 38 \<papertext style={styles header text bold}> 39 {'react native on back4app'} 40 \</papertext> 41 \<papertext style={styles header text}>{'product creation'}\</papertext> 42 \</view> 43 \<view style={styles wrapper}> 44 {/ boolean type input /} 45 \<view style={styles switch container}> 46 \<papertext>{'available?'}\</papertext> 47 \<paperswitch 48 value={productavailable} 49 onvaluechange={toggleproductavailable} 50 /> 51 \</view> 52 {/ string type input /} 53 \<papertextinput 54 value={productname} 55 onchangetext={(text) => setproductname(text)} 56 label="name" 57 mode="outlined" 58 style={styles form input} 59 /> 60 {/ number type input (integer) /} 61 \<papertextinput 62 value={productquantity} 63 onchangetext={(text) => setproductquantity(text)} 64 label="quantity" 65 mode="outlined" 66 keyboardtype={'number pad'} 67 style={styles form input} 68 /> 69 {/ number type input (float) /} 70 \<papertextinput 71 value={productprice} 72 onchangetext={(text) => setproductprice(text)} 73 label="price" 74 mode="outlined" 75 keyboardtype={'numeric'} 76 style={styles form input} 77 /> 78 {/ date type input /} 79 \<papertextinput 80 value={productexpirationdate} 81 onchangetext={(text) => setproductexpirationdate(text)} 82 label="expiration date (mm/dd/yyyy)" 83 mode="outlined" 84 keyboardtype={'numbers and punctuation'} 85 style={styles form input} 86 /> 87 {/ array type input /} 88 \<papertextinput 89 value={productcategories} 90 onchangetext={(text) => setproductcategories(text)} 91 label="categories (separated by commas)" 92 mode="outlined" 93 style={styles form input} 94 /> 95 {/ product create button /} 96 \<paperbutton 97 onpress={() => createproduct()} 98 mode="contained" 99 icon="plus" 100 style={styles submit button}> 101 {'create product'} 102 \</paperbutton> 103 \</view> 104 \</safeareaview> 105 \</> 106 ); 107 }; 108	 109 // these define the screen component styles 110 const styles = stylesheet create({ 111 container { 112 flex 1, 113 backgroundcolor '#fff', 114 }, 115 wrapper { 116 width '90%', 117 alignself 'center', 118 }, 119 header { 120 alignitems 'center', 121 paddingtop 10, 122 paddingbottom 20, 123 backgroundcolor '#208aec', 124 }, 125 header logo { 126 width 170, 127 height 40, 128 marginbottom 10, 129 resizemode 'contain', 130 }, 131 header text bold { 132 color '#fff', 133 fontsize 14, 134 fontweight 'bold', 135 }, 136 header text { 137 margintop 3, 138 color '#fff', 139 fontsize 14, 140 }, 141 form input { 142 height 44, 143 marginbottom 16, 144 backgroundcolor '#fff', 145 fontsize 14, 146 }, 147 switch container { 148 flexdirection 'row', 149 alignitems 'center', 150 justifycontent 'space between', 151 paddingvertical 12, 152 marginbottom 16, 153 borderbottomwidth 1, 154 borderbottomcolor 'rgba(0, 0, 0, 0 3)', 155 }, 156 submit button { 157 width '100%', 158 maxheight 50, 159 alignself 'center', 160 backgroundcolor '#208aec', 161 }, 162 }); после настройки этого экрана ваше приложение должно выглядеть так обратите внимание, что каждый \продукт\ имеет свое текстовое поле ввода, за исключением булевого переключателя, что означает, что данные в них необходимо преобразовать в соответствующий тип данных перед сохранением 2 преобразование входных данных перед сохранением ваших данных в \parse object\ , вам необходимо правильно отформатировать \число\ , \datetime\ , и \массив\ входные данные теперь давайте создадим функцию сохранения, которая будет извлекать данные из ваших переменных состояния и применять соответствующее преобразование данных productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert alert('error!', error message); 14 return false; 15 } 16 }; productcreation tsx 1 const createproduct = async function () promise<\[boolean]> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert alert('error!', error message); 14 return false; 15 } 16 }; числовая \данные\ конверсия выполняется путем приведения значения к \число\ объекту javascript \датавремя\ конвертируется с использованием конструктора \дата\ объекта javascript; \массив\ создается с помощью метода \string split\ в javascript, создавая массив, содержащий каждую запись поля категорий, разделенную запятыми обратите внимание, что ваши данные теперь содержатся внутри одного объекта, который можно установить в новый \parse object\ экземпляр, чтобы сохранить его на сервере с помощью метода \parse object set()\ , который принимает два аргумента имя поля и значение, которое нужно установить давайте также установим новое поле под названием \completedata\ , которое будет вашим \объектом\ типа поля, присваивая ему тот же объект данных продолжайте и завершите функцию \createproduct\ , следуя этому productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert alert('error!', error message); 14 return false; 15 } 16	 17 // creates a new product parse object instance 18 let product = new parse object('product'); 19 20 // set data to parse object 21 product set('name', productnamevalue); 22 product set('quantity', productquantityvalue); 23 product set('price', productpricevalue); 24 product set('available', productavailablevalue); 25 product set('expirationdate', productexpirationdatevalue); 26 product set('categories', productcategoriesvalue); 27 product set('completedata', { 28 name productnamevalue, 29 quantity productquantityvalue, 30 price productpricevalue, 31 available productavailablevalue, 32 expirationdate productexpirationdatevalue, 33 categories productcategoriesvalue, 34 }); 35	 36 // after setting the values, save it on the server 37 try { 38 let savedproduct = await product save(); 39 // success 40 alert alert('success!', json stringify(savedproduct)); 41 return true; 42 } catch (error) { 43 // error can be caused by lack of internet connection 44 alert alert('error!', error message); 45 return false; 46 }; 47 }; productcreation tsx 1 const createproduct = async function () promise<\[boolean]> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert alert('error!', error message); 14 return false; 15 } 16	 17 // creates a new product parse object instance 18 let product parse object = new parse object('product'); 19 20 // set data to parse object 21 product set('name', productnamevalue); 22 product set('quantity', productquantityvalue); 23 product set('price', productpricevalue); 24 product set('available', productavailablevalue); 25 product set('expirationdate', productexpirationdatevalue); 26 product set('categories', productcategoriesvalue); 27 product set('completedata', { 28 name productnamevalue, 29 quantity productquantityvalue, 30 price productpricevalue, 31 available productavailablevalue, 32 expirationdate productexpirationdatevalue, 33 categories productcategoriesvalue, 34 }); 35	 36 // after setting the values, save it on the server 37 try { 38 let savedproduct parse object = await product save(); 39 // success 40 alert alert('success!', json stringify(savedproduct)); 41 return true; 42 } catch (error) { 43 // error can be caused by lack of internet connection 44 alert alert('error!', error message); 45 return false; 46 }; 47 }; теперь вы можете протестировать компонент, вставить функцию \createproduct\ и вызвать её внутри кнопки отправки вашей формы \onpress\ после создания продукта вы должны увидеть оповещение, содержащее его данные, как это чтобы подтвердить, что ваши данные были сохранены на сервере с использованием правильных типов данных, вы можете посмотреть на вашу панель управления parse нажмите на \продукт\ таблицу данных и обратите внимание, что в каждом столбце указаны его тип данных в заголовке ваш класс должен выглядеть так заключение в конце этого руководства вы узнали, как сохранить каждый из основных типов данных, доступных на parse, с помощью компонента react native в следующем руководстве вы узнаете о реляционных данных на parse