React Native中的Parse基本数据操作指南

11min
React Native CRUD 教程
介绍
在 Parse 上存储数据是基于 Parse.Object 类。每个 Parse.Object 包含 JSON 兼容数据的键值对。这些数据是无模式的，这意味着您不需要提前指定每个 Parse.Object 上存在的键。您可以简单地设置您想要的任何键值对，我们的后端将存储它。
您还可以根据应用程序的需要指定数据类型，并持久化类型，例如 数字, 布尔值, 字符串, 日期时间, 列表, 地理指针, 和 对象, 在保存之前将它们编码为 JSON。Parse 还支持通过使用 指针 和 关系 来存储和查询关系数据。
在本指南中，您将学习如何通过 CRUD 示例应用程序执行基本数据操作，该应用程序将向您展示如何在 React Native 中从 Parse 服务器数据库创建、读取、更新和删除数据。您将首先为每个 CRUD 操作创建组件函数，稍后在完整的屏幕布局中使用它们，最终形成一个待办事项列表应用程序。
﻿
前提条件
要完成本教程，您需要：
一个创建并连接到 Back4App 的 React Native 应用.
如果您想测试/使用本指南提供的屏幕布局，您应该设置react-native-paper﻿库.
目标
在 React Native 中使用 Parse 构建一个基本的 CRUD 应用程序。
- 创建数据对象
在您的 Parse 数据库中管理数据的第一步是确保有一些数据。现在让我们创建一个 createTodo 函数，该函数将创建一个新的 Parse.Object 实例，使用“Todo”子类。Todo 将有一个标题（字符串）来描述任务，以及一个 done（布尔值）字段，用于指示任务是否已完成。
JavaScript
TodoList.tsx
const createTodo = async function () {
 // This value comes from a state variable
 const newTodoTitleValue = newTodoTitle;
 // Creates a new Todo parse object instance
 let Todo = new Parse.Object('Todo');
 Todo.set('title', newTodoTitleValue);
 Todo.set('done', false);
 // After setting the todo values, save it on the server
 try {
   await Todo.save();
   // Success
   Alert.alert('Success!', 'Todo created!');
   // Refresh todos list to show the new one (you will create this function later)
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
const createTodo = async function () {
 // This value comes from a state variable
 const newTodoTitleValue = newTodoTitle;
 // Creates a new Todo parse object instance
 let Todo = new Parse.Object('Todo');
 Todo.set('title', newTodoTitleValue);
 Todo.set('done', false);
 // After setting the todo values, save it on the server
 try {
   await Todo.save();
   // Success
   Alert.alert('Success!', 'Todo created!');
   // Refresh todos list to show the new one (you will create this function later)
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
﻿
请注意，如果您的数据库中尚未有 Todo 表（或子类），Parse 将自动创建它，并添加在 Parse.Object 实例中设置的任何列，使用 Parse.Object.set() 方法，该方法接受两个参数：字段名称和要设置的值。
- 读取数据对象
在您的数据库中创建了一些数据后，您的应用程序现在可以从服务器读取这些数据并将其显示给用户。继续创建一个 readTodos 函数，该函数将执行一个 Parse.Query，并将结果存储在状态变量中。
JavaScript
TypeScript
const readTodos = async function (): Promise<boolean> {
 // Reading parse objects is done by using Parse.Query
 const parseQuery: Parse.Query = new Parse.Query('Todo');
 try {
   let todos: Parse.Object[] = await parseQuery.find();
   // Be aware that empty or invalid queries return as an empty array
   // Set results to state variable
   setReadResults(todos);
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
const readTodos = async function (): Promise<boolean> {
 // Reading parse objects is done by using Parse.Query
 const parseQuery: Parse.Query = new Parse.Query('Todo');
 try {
   let todos: Parse.Object[] = await parseQuery.find();
   // Be aware that empty or invalid queries return as an empty array
   // Set results to state variable
   setReadResults(todos);
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
﻿
这个 Parse.Query 类非常强大，可以对您的查询应用许多约束和排序。目前，我们将坚持这个简单的查询，它将检索每个保存的 Todo 对象。
- 更新数据对象
更新一个 Parse.Object 实例与创建一个新实例非常相似，只是这次您需要将之前创建的 objectId 分配给它，然后在设置新值后保存。
JavaScript
TypeScript
const updateTodo = async function (todoId, done) {
 // Create a new todo parse object instance and set todo id
 let Todo = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // Set new done value and save Parse Object changes
 Todo.set('done', done);
 try {
   await Todo.save();
   // Success
   Alert.alert('Success!', 'Todo updated!');
   // Refresh todos list
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
const updateTodo = async function (todoId, done) {
 // Create a new todo parse object instance and set todo id
 let Todo = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // Set new done value and save Parse Object changes
 Todo.set('done', done);
 try {
   await Todo.save();
   // Success
   Alert.alert('Success!', 'Todo updated!');
   // Refresh todos list
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
﻿
由于这个示例应用程序表示一个待办事项列表，您的更新函数需要一个额外的参数，即 完成 值，这将表示特定任务是否已完成。
- 删除数据对象
要删除数据对象，您需要在代表它的 .destroy() 方法中调用 Parse.Object 实例。请小心，因为此操作是不可逆的。
JavaScript
TypeScript
const deleteTodo = async function (todoId: string): Promise<boolean> {
 // Create a new todo parse object instance and set todo id
 let Todo: Parse.Object = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // .destroy should be called to delete a parse object
 try {
   await Todo.destroy();
   Alert.alert('Success!', 'Todo deleted!');
   // Refresh todos list to remove this one
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
const deleteTodo = async function (todoId: string): Promise<boolean> {
 // Create a new todo parse object instance and set todo id
 let Todo: Parse.Object = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // .destroy should be called to delete a parse object
 try {
   await Todo.destroy();
   Alert.alert('Success!', 'Todo deleted!');
   // Refresh todos list to remove this one
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
﻿
现在让我们在一个完整的组件中使用这四个函数，以便您可以测试并确保每个 CRUD 操作正常工作。
- 在 React Native 组件中使用 CRUD
这是完整的组件代码，包括样式化的用户界面元素、状态变量和对您的 CRUD 函数的调用。您可以在名为 TodoList.js/TodoList.tsx 的文件中创建一个单独的组件，或者将其添加到您的主应用程序文件中 (App.js/App.tsx 或 index.js):
TodoList.js
TodoList.tsx
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 View,
 SafeAreaView,
 Image,
 ScrollView,
 StatusBar,
 StyleSheet,
 TouchableOpacity,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 IconButton,
 Text as PaperText,
 Button as PaperButton,
 TextInput as PaperTextInput,
} from 'react-native-paper';

export const TodoList: FC<{}> = ({}): ReactElement => {
 // State variables
 const [readResults, setReadResults] = useState<[Parse.Object]>();
 const [newTodoTitle, setNewTodoTitle] = useState('');

 // Functions used by the screen components
 const createTodo = async function (): Promise<boolean> {
   // This value comes from a state variable
   const newTodoTitleValue: string = newTodoTitle;
   // Creates a new Todo parse object instance
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('title', newTodoTitleValue);
   Todo.set('done', false);
   // After setting the todo values, save it on the server
   try {
     await Todo.save();
     // Success
     Alert.alert('Success!', 'Todo created!');
     // Refresh todos list to show the new one (you will create this function later)
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const readTodos = async function (): Promise<boolean> {
   // Reading parse objects is done by using Parse.Query
   const parseQuery: Parse.Query = new Parse.Query('Todo');
   try {
     let todos: Parse.Object[] = await parseQuery.find();
     // Be aware that empty or invalid queries return as an empty array
     // Set results to state variable
     setReadResults(todos);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const updateTodo = async function (
   todoId: string,
   done: boolean,
 ): Promise<boolean> {
   // Create a new todo parse object instance and set todo id
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // Set new done value and save Parse Object changes
   Todo.set('done', done);
   try {
     await Todo.save();
     // Success
     Alert.alert('Success!', 'Todo updated!');
     // Refresh todos list
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const deleteTodo = async function (todoId: string): Promise<boolean> {
   // Create a new todo parse object instance and set todo id
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // .destroy should be called to delete a parse object
   try {
     await Todo.destroy();
     Alert.alert('Success!', 'Todo deleted!');
     // Refresh todos list to remove this one
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 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}>
         <View style={Styles.flex_between}>
           <Title>Todo List</Title>
           {/* Todo read (refresh) button */}
           <IconButton
             icon="refresh"
             color={'#208AEC'}
             size={24}
             onPress={() => readTodos()}
           />
         </View>
         <View style={Styles.create_todo_container}>
           {/* Todo create text input */}
           <PaperTextInput
             value={newTodoTitle}
             onChangeText={text => setNewTodoTitle(text)}
             label="New Todo"
             mode="outlined"
             style={Styles.create_todo_input}
           />
           {/* Todo create button */}
           <PaperButton
             onPress={() => createTodo()}
             mode="contained"
             icon="plus"
             color={'#208AEC'}
             style={Styles.create_todo_button}>
             {'Add'}
           </PaperButton>
         </View>
         <ScrollView>
           {/* Todo read results list */}
           {readResults !== null &&
             readResults !== undefined &&
             readResults.map((todo: Parse.Object) => (
               <List.Item
                 key={todo.id}
                 title={todo.get('title')}
                 titleStyle={
                   todo.get('done') === true
                     ? Styles.todo_text_done
                     : Styles.todo_text
                 }
                 style={Styles.todo_item}
                 right={props => (
                   <>
                     {/* Todo update button */}
                     {todo.get('done') !== true && (
                       <TouchableOpacity
                         onPress={() => updateTodo(todo.id, true)}>
                         <List.Icon
                           {...props}
                           icon="check"
                           color={'#4CAF50'}
                         />
                       </TouchableOpacity>
                     )}
                     {/* Todo delete button */}
                     <TouchableOpacity onPress={() => deleteTodo(todo.id)}>
                       <List.Icon {...props} icon="close" color={'#ef5350'} />
                     </TouchableOpacity>
                   </>
                 )}
               />
             ))}
         </ScrollView>
       </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,
 },
 flex_between: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 create_todo_container: {
   flexDirection: 'row',
 },
 create_todo_input: {
   flex: 1,
   height: 38,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 create_todo_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 todo_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 todo_text: {
   fontSize: 15,
 },
 todo_text_done: {
   color: 'rgba(0, 0, 0, 0.3)',
   fontSize: 15,
   textDecorationLine: 'line-through',
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 View,
 SafeAreaView,
 Image,
 ScrollView,
 StatusBar,
 StyleSheet,
 TouchableOpacity,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 IconButton,
 Text as PaperText,
 Button as PaperButton,
 TextInput as PaperTextInput,
} from 'react-native-paper';

export const TodoList: FC<{}> = ({}): ReactElement => {
 // State variables
 const [readResults, setReadResults] = useState<[Parse.Object]>();
 const [newTodoTitle, setNewTodoTitle] = useState('');

 // Functions used by the screen components
 const createTodo = async function (): Promise<boolean> {
   // This value comes from a state variable
   const newTodoTitleValue: string = newTodoTitle;
   // Creates a new Todo parse object instance
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('title', newTodoTitleValue);
   Todo.set('done', false);
   // After setting the todo values, save it on the server
   try {
     await Todo.save();
     // Success
     Alert.alert('Success!', 'Todo created!');
     // Refresh todos list to show the new one (you will create this function later)
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const readTodos = async function (): Promise<boolean> {
   // Reading parse objects is done by using Parse.Query
   const parseQuery: Parse.Query = new Parse.Query('Todo');
   try {
     let todos: Parse.Object[] = await parseQuery.find();
     // Be aware that empty or invalid queries return as an empty array
     // Set results to state variable
     setReadResults(todos);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const updateTodo = async function (
   todoId: string,
   done: boolean,
 ): Promise<boolean> {
   // Create a new todo parse object instance and set todo id
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // Set new done value and save Parse Object changes
   Todo.set('done', done);
   try {
     await Todo.save();
     // Success
     Alert.alert('Success!', 'Todo updated!');
     // Refresh todos list
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const deleteTodo = async function (todoId: string): Promise<boolean> {
   // Create a new todo parse object instance and set todo id
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // .destroy should be called to delete a parse object
   try {
     await Todo.destroy();
     Alert.alert('Success!', 'Todo deleted!');
     // Refresh todos list to remove this one
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 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}>
         <View style={Styles.flex_between}>
           <Title>Todo List</Title>
           {/* Todo read (refresh) button */}
           <IconButton
             icon="refresh"
             color={'#208AEC'}
             size={24}
             onPress={() => readTodos()}
           />
         </View>
         <View style={Styles.create_todo_container}>
           {/* Todo create text input */}
           <PaperTextInput
             value={newTodoTitle}
             onChangeText={text => setNewTodoTitle(text)}
             label="New Todo"
             mode="outlined"
             style={Styles.create_todo_input}
           />
           {/* Todo create button */}
           <PaperButton
             onPress={() => createTodo()}
             mode="contained"
             icon="plus"
             color={'#208AEC'}
             style={Styles.create_todo_button}>
             {'Add'}
           </PaperButton>
         </View>
         <ScrollView>
           {/* Todo read results list */}
           {readResults !== null &&
             readResults !== undefined &&
             readResults.map((todo: Parse.Object) => (
               <List.Item
                 key={todo.id}
                 title={todo.get('title')}
                 titleStyle={
                   todo.get('done') === true
                     ? Styles.todo_text_done
                     : Styles.todo_text
                 }
                 style={Styles.todo_item}
                 right={props => (
                   <>
                     {/* Todo update button */}
                     {todo.get('done') !== true && (
                       <TouchableOpacity
                         onPress={() => updateTodo(todo.id, true)}>
                         <List.Icon
                           {...props}
                           icon="check"
                           color={'#4CAF50'}
                         />
                       </TouchableOpacity>
                     )}
                     {/* Todo delete button */}
                     <TouchableOpacity onPress={() => deleteTodo(todo.id)}>
                       <List.Icon {...props} icon="close" color={'#ef5350'} />
                     </TouchableOpacity>
                   </>
                 )}
               />
             ))}
         </ScrollView>
       </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,
 },
 flex_between: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 create_todo_container: {
   flexDirection: 'row',
 },
 create_todo_input: {
   flex: 1,
   height: 38,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 create_todo_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 todo_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 todo_text: {
   fontSize: 15,
 },
 todo_text_done: {
   color: 'rgba(0, 0, 0, 0.3)',
   fontSize: 15,
   textDecorationLine: 'line-through',
﻿
如果您的组件设置正确，构建并运行应用后，您应该会看到类似这样的内容:
﻿
继续添加待办事项，逐个在输入框中输入标题，然后按下 添加 按钮。请注意，每次成功创建后， createTodo 函数会触发 readTodos 函数，自动刷新您的任务列表。您现在应该有一个像这样的可观的待办事项列表:
﻿
您现在可以通过点击旁边的勾选框来标记任务为完成，这会将它们的 完成 值更新为真，并更改其左侧的图标状态。
﻿
现在唯一剩下的数据操作是删除操作，可以通过按下待办事项列表对象最右侧的垃圾桶图标来完成。成功删除对象后，您应该会收到如下的警报消息:
﻿
结论
在本指南的最后，您学习了如何在 React Native 中执行 Parse 的基本数据操作（CRUD）。在下一个指南中，我们将向您展示 Parse 支持哪些数据类型以及如何使用它们。