在React Native中使用Parse管理和存储数据类型

9min
在 React Native 组件中解析数据类型
介绍
Parse Core 功能的核心是数据对象管理。Parse 允许您使用其 SDK 或 API（REST 或 GraphQL）直接存储和查询数据。所有数据对象功能都是使用 Parse.Object 类构建的，该类的字段可以包含多种 JSON 兼容数据类型的键值对。可以分配给对象字段的主要数据类型如下:
﻿数字: 整数（42）或浮点数（42.5），只要 ‘.’ 是小数分隔符；
﻿布尔值: true 或 false 值；
﻿字符串: 一个字符串，长度可以达到 2147483647 个字符。请注意，这么大的值会减慢数据操作；
﻿日期时间:日期时间对象以 UTC 格式存储为默认值。如果需要使用其他时区，转换应手动进行；
﻿数组: 一个包含任何 Parse 兼容数据的数组。
﻿对象: 一个 JSON 对象，也包含任何 Parse 数据。当在 SDK 中可用时，include() 调用将从对象属性中获取详细信息。
当您选择使用数组类型时，我们建议保持数组对象的小型化，因为这会影响数据操作的整体性能。我们的建议是，如果不超过20个元素且不会随时间增长，则使用数组类型。您可以使用指针和关系类型作为替代，而不是数组类型。
在本指南中，您将学习如何在上述基本数据类型中存储数据。您将构建一个React Native产品注册组件，这将向您展示如何格式化、转换和保存数据到您的Parse服务器中。
Parse还提供了数据类型 GeoPoint 以利用地理位置资源的强大功能，以及使用 Pointer 或 Relation 的Parse特定关系数据。您将在接下来的指南中看到这两者的介绍。
﻿
前提条件
要完成本教程，您需要：
一个创建并连接到 Back4App 的 React Native 应用.
如果您想测试/使用本指南提供的屏幕布局，您应该设置react-native-paper﻿库.
目标
了解与 Parse 兼容的基本数据类型，并从 React Native 组件中将每种数据类型存储到 Parse.
- 产品创建组件
让我们首先创建组件结构。让我们简单一点，创建一个表单屏幕，每种数据类型一个文本输入，一个开关切换，以及一个提交按钮来保存对象。这些输入将收集您的 产品 字段值：名称（字符串），数量（数字），价格（数字），可用性（布尔值），到期日期（日期时间），和类别（数组）。此外，您还将在保存方法中保存一个额外的 对象 类型字段，但这个字段不需要输入框。
在一个名为 ProductCreation.js/ProductCreation.tsx 的文件中创建一个单独的组件，包含以下代码，或者将其添加到您的主应用程序文件中 (App.js/App.tsx 或 index.js)。您可以使用 react-native-paper 进行完整样式的布局，或者设置您自定义的表单。
ProductCreation.js
ProductCreation.tsx
import React, {useState} from 'react';
import {
 Alert,
 Image,
 SafeAreaView,
 StatusBar,
 StyleSheet,
 View,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 Button as PaperButton,
 Switch as PaperSwitch,
 Text as PaperText,
 TextInput as PaperTextInput,
} from 'react-native-paper';

export const ProductCreation = () => {
 // State variables
 const [productName, setProductName] = useState('');
 const [productQuantity, setProductQuantity] = useState('');
 const [productPrice, setProductPrice] = useState('');
 const [productAvailable, setProductAvailable] = useState(false);
 const [productExpirationDate, setProductExpirationDate] = useState('');
 const [productCategories, setProductCategories] = useState('');

 const toggleProductAvailable = () => setProductAvailable(!productAvailable);

 return (
   <>
     <StatusBar backgroundColor="#208AEC" />
     <SafeAreaView style={Styles.container}>
       <View style={Styles.header}>
         <Image
           style={Styles.header_logo}
           source={ { uri: 'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png', } }
         />
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App'}
         </PaperText>
         <PaperText style={Styles.header_text}>{'Product Creation'}</PaperText>
       </View>
       <View style={Styles.wrapper}>
         {/* Boolean type input  */}
         <View style={Styles.switch_container}>
           <PaperText>{'Available?'}</PaperText>
           <PaperSwitch
             value={productAvailable}
             onValueChange={toggleProductAvailable}
           />
         </View>
         {/* String type input */}
         <PaperTextInput
           value={productName}
           onChangeText={(text) => setProductName(text)}
           label="Name"
           mode="outlined"
           style={Styles.form_input}
         />
         {/* Number type input (integer) */}
         <PaperTextInput
           value={productQuantity}
           onChangeText={(text) => setProductQuantity(text)}
           label="Quantity"
           mode="outlined"
           keyboardType={'number-pad'}
           style={Styles.form_input}
         />
         {/* Number type input (float) */}
         <PaperTextInput
           value={productPrice}
           onChangeText={(text) => setProductPrice(text)}
           label="Price"
           mode="outlined"
           keyboardType={'numeric'}
           style={Styles.form_input}
         />
         {/* Date type input  */}
         <PaperTextInput
           value={productExpirationDate}
           onChangeText={(text) => setProductExpirationDate(text)}
           label="Expiration Date (mm/dd/yyyy)"
           mode="outlined"
           keyboardType={'numbers-and-punctuation'}
           style={Styles.form_input}
         />
         {/* Array type input  */}
         <PaperTextInput
           value={productCategories}
           onChangeText={(text) => setProductCategories(text)}
           label="Categories (separated by commas)"
           mode="outlined"
           style={Styles.form_input}
         />
         {/* Product create button */}
         <PaperButton
           onPress={() => createProduct()}
           mode="contained"
           icon="plus"
           style={Styles.submit_button}>
           {'Create Product'}
         </PaperButton>
       </View>
     </SafeAreaView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#FFF',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 header: {
   alignItems: 'center',
   paddingTop: 10,
   paddingBottom: 20,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   width: 170,
   height: 40,
   marginBottom: 10,
   resizeMode: 'contain',
 },
 header_text_bold: {
   color: '#fff',
   fontSize: 14,
   fontWeight: 'bold',
 },
 header_text: {
   marginTop: 3,
   color: '#fff',
   fontSize: 14,
 },
 form_input: {
   height: 44,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 switch_container: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
   paddingVertical: 12,
   marginBottom: 16,
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.3)',
 },
 submit_button: {
   width: '100%',
   maxHeight: 50,
   alignSelf: 'center',
   backgroundColor: '#208AEC',
 },
});
import React, {useState} from 'react';
import {
 Alert,
 Image,
 SafeAreaView,
 StatusBar,
 StyleSheet,
 View,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 Button as PaperButton,
 Switch as PaperSwitch,
 Text as PaperText,
 TextInput as PaperTextInput,
} from 'react-native-paper';

export const ProductCreation = () => {
 // State variables
 const [productName, setProductName] = useState('');
 const [productQuantity, setProductQuantity] = useState('');
 const [productPrice, setProductPrice] = useState('');
 const [productAvailable, setProductAvailable] = useState(false);
 const [productExpirationDate, setProductExpirationDate] = useState('');
 const [productCategories, setProductCategories] = useState('');

 const toggleProductAvailable = () => setProductAvailable(!productAvailable);

 return (
   <>
     <StatusBar backgroundColor="#208AEC" />
     <SafeAreaView style={Styles.container}>
       <View style={Styles.header}>
         <Image
           style={Styles.header_logo}
           source={ { uri: 'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png', } }
         />
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App'}
         </PaperText>
         <PaperText style={Styles.header_text}>{'Product Creation'}</PaperText>
       </View>
       <View style={Styles.wrapper}>
         {/* Boolean type input  */}
         <View style={Styles.switch_container}>
           <PaperText>{'Available?'}</PaperText>
           <PaperSwitch
             value={productAvailable}
             onValueChange={toggleProductAvailable}
           />
         </View>
         {/* String type input */}
         <PaperTextInput
           value={productName}
           onChangeText={(text) => setProductName(text)}
           label="Name"
           mode="outlined"
           style={Styles.form_input}
         />
         {/* Number type input (integer) */}
         <PaperTextInput
           value={productQuantity}
           onChangeText={(text) => setProductQuantity(text)}
           label="Quantity"
           mode="outlined"
           keyboardType={'number-pad'}
           style={Styles.form_input}
         />
         {/* Number type input (float) */}
         <PaperTextInput
           value={productPrice}
           onChangeText={(text) => setProductPrice(text)}
           label="Price"
           mode="outlined"
           keyboardType={'numeric'}
           style={Styles.form_input}
         />
         {/* Date type input  */}
         <PaperTextInput
           value={productExpirationDate}
           onChangeText={(text) => setProductExpirationDate(text)}
           label="Expiration Date (mm/dd/yyyy)"
           mode="outlined"
           keyboardType={'numbers-and-punctuation'}
           style={Styles.form_input}
         />
         {/* Array type input  */}
         <PaperTextInput
           value={productCategories}
           onChangeText={(text) => setProductCategories(text)}
           label="Categories (separated by commas)"
           mode="outlined"
           style={Styles.form_input}
         />
         {/* Product create button */}
         <PaperButton
           onPress={() => createProduct()}
           mode="contained"
           icon="plus"
           style={Styles.submit_button}>
           {'Create Product'}
         </PaperButton>
       </View>
     </SafeAreaView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#FFF',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 header: {
   alignItems: 'center',
   paddingTop: 10,
   paddingBottom: 20,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   width: 170,
   height: 40,
   marginBottom: 10,
   resizeMode: 'contain',
 },
 header_text_bold: {
   color: '#fff',
   fontSize: 14,
   fontWeight: 'bold',
 },
 header_text: {
   marginTop: 3,
   color: '#fff',
   fontSize: 14,
 },
 form_input: {
   height: 44,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 switch_container: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
   paddingVertical: 12,
   marginBottom: 16,
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.3)',
 },
 submit_button: {
   width: '100%',
   maxHeight: 50,
   alignSelf: 'center',
   backgroundColor: '#208AEC',
 },
});
﻿
设置好这个屏幕后，您的应用程序应该看起来像这样：
﻿
请注意，每个 产品 属性都有其文本输入字段，除了布尔开关输入，这意味着在保存之前，它们中的数据需要转换为相应的数据类型。
- 转换输入数据
在将您的数据保存到 Parse.object, 您需要正确格式化 数字, 日期时间, 和 数组 输入。现在让我们创建一个保存函数，它将从您的状态变量中检索数据并应用适当的数据转换:
ProductCreation.js
ProductCreation.tsx
const createProduct = async function (): Promise<[boolean]> {
 try {
   // These values come from state variables
   // Convert data values to corresponding data types
   const productNameValue: string = productName;
   const productQuantityValue: number = Number(productQuantity);
   const productPriceValue: number = Number(productPrice);
   const productAvailableValue: boolean = productAvailable;
   const productExpirationDateValue: Date = new Date(productExpirationDate);
   const productCategoriesValue: string[] = productCategories.split(',');
 } catch (error) {
   // Error can be caused by wrong type of values in fields
   Alert.alert('Error!', error.message);
   return false;
 }
};
const createProduct = async function (): Promise<[boolean]> {
 try {
   // These values come from state variables
   // Convert data values to corresponding data types
   const productNameValue: string = productName;
   const productQuantityValue: number = Number(productQuantity);
   const productPriceValue: number = Number(productPrice);
   const productAvailableValue: boolean = productAvailable;
   const productExpirationDateValue: Date = new Date(productExpirationDate);
   const productCategoriesValue: string[] = productCategories.split(',');
 } catch (error) {
   // Error can be caused by wrong type of values in fields
   Alert.alert('Error!', error.message);
   return false;
 }
};
﻿
该 数字 数据转换是将值转换为一个 数字 JavaScript 对象。 日期时间 是使用 日期 JavaScript 对象构造函数转换的； 数组 是通过使用 String.split 方法在 JavaScript 中创建的，生成一个包含类别字段中每个条目（以逗号分隔）的数组。
请注意，您的数据现在包含在一个单一对象中，可以设置为一个新的 Parse.object 实例，以便使用 Parse.Object.set() 方法保存到服务器，该方法接受两个参数：字段名称和要设置的值。我们还将设置一个名为 completeData, 这将是您的 对象 类型字段，将相同的数据对象分配给它。
继续完成 createProduct 函数，内容如下:
ProductCreation.js
ProductCreation.tsx
const createProduct = async function (): Promise<[boolean]> {
 try {
   // These values come from state variables
   // Convert data values to corresponding data types
   const productNameValue: string = productName;
   const productQuantityValue: number = Number(productQuantity);
   const productPriceValue: number = Number(productPrice);
   const productAvailableValue: boolean = productAvailable;
   const productExpirationDateValue: Date = new Date(productExpirationDate);
   const productCategoriesValue: string[] = productCategories.split(',');
 } catch (error) {
   // Error can be caused by wrong type of values in fields
   Alert.alert('Error!', error.message);
   return false;
 }

 // Creates a new Product parse object instance
 let Product: Parse.Object = new Parse.Object('Product');
 
 // Set data to parse object
 Product.set('name', productNameValue);
 Product.set('quantity', productQuantityValue);
 Product.set('price', productPriceValue);
 Product.set('available', productAvailableValue);
 Product.set('expirationDate', productExpirationDateValue);
 Product.set('categories', productCategoriesValue);
 Product.set('completeData', {
   name: productNameValue,
   quantity: productQuantityValue,
   price: productPriceValue,
   available: productAvailableValue,
   expirationDate: productExpirationDateValue,
   categories: productCategoriesValue,
 });

 // After setting the values, save it on the server
 try {
   let savedProduct: Parse.Object = await Product.save();
   // Success
   Alert.alert('Success!', JSON.stringify(savedProduct));
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
const createProduct = async function (): Promise<[boolean]> {
 try {
   // These values come from state variables
   // Convert data values to corresponding data types
   const productNameValue: string = productName;
   const productQuantityValue: number = Number(productQuantity);
   const productPriceValue: number = Number(productPrice);
   const productAvailableValue: boolean = productAvailable;
   const productExpirationDateValue: Date = new Date(productExpirationDate);
   const productCategoriesValue: string[] = productCategories.split(',');
 } catch (error) {
   // Error can be caused by wrong type of values in fields
   Alert.alert('Error!', error.message);
   return false;
 }

 // Creates a new Product parse object instance
 let Product: Parse.Object = new Parse.Object('Product');
 
 // Set data to parse object
 Product.set('name', productNameValue);
 Product.set('quantity', productQuantityValue);
 Product.set('price', productPriceValue);
 Product.set('available', productAvailableValue);
 Product.set('expirationDate', productExpirationDateValue);
 Product.set('categories', productCategoriesValue);
 Product.set('completeData', {
   name: productNameValue,
   quantity: productQuantityValue,
   price: productPriceValue,
   available: productAvailableValue,
   expirationDate: productExpirationDateValue,
   categories: productCategoriesValue,
 });

 // After setting the values, save it on the server
 try {
   let savedProduct: Parse.Object = await Product.save();
   // Success
   Alert.alert('Success!', JSON.stringify(savedProduct));
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
﻿
您现在可以测试组件，在其中插入 createProduct 函数，并在您的表单提交按钮 onPress 属性中调用它。创建产品后，您应该会看到一个包含其数据的警报，如下所示:
﻿
要证明您的数据已使用正确的数据类型保存在服务器上，您可以查看您的 Parse 控制面板。点击 产品 数据表，并注意每一列的标题上都有其数据类型。您的类应该看起来像这样:
﻿
结论
在本指南的最后，您学习了如何使用 React Native 组件保存 Parse 上可用的每种基本数据类型。在下一个指南中，您将学习 Parse 上的关系数据。
更新日期 27 Jan 2025
此页面是否对您有帮助？
上一个
React Native中的Parse基本数据操作指南
下一个
在React Native中使用Parse创建与查询一对多关系
在React Native中使用Parse管理和存储数据类型

在 React Native 组件中解析数据类型

介绍

前提条件

目标

1 - 产品创建组件

2 - 转换输入数据

结论
