使用Parse库构建实时React Native应用教程

19min
使用 useParseQuery 钩子构建实时 React Native 应用
介绍
在本指南中，您将通过一个 ToDO React Native 应用示例探索 @parse/react-native 库的主要功能。您将使用 useParseQuery 钩子实时查询任务并将结果本地存储在此应用中。通过使用各种 Parse 查询，您将发现如何在项目中使用新的 Parse 库。
Parse React Native 目前处于 Alpha 版本。该库正在测试中，因此我们建议谨慎使用。我们非常感谢您的反馈，因此请随时使用该库，并通过发送电子邮件至 [email protected] 向我们提出您的问题和初步印象。
目标
通过创建一个 ToDo 应用程序来探索 Parse React Native 库的主要用例。
先决条件
要完成本教程，您需要：
在 Back4App 上创建的应用。
遵循 启用实时查询 教程。
注意：遵循 Parse React Native 教程 以了解如何开始使用 @parse/react-native
1 - 设置初始项目
在开始之前，您需要获取我们为本教程设置的 bootstrap React Native 项目作为起点。它是一个简单的 react-native init 项目，所有依赖项和样式都已预定义，以便您专注于探索 @parse/react-native 的功能。您可以 下载 Zip 或克隆该项目。
git clone https://github.com/templates-back4app/react-native-todo-app.git
接下来，安装项目依赖项：
cd react-native-todo-app

 # 使用 yarn
yarn install

  # 使用 npm
npm install
对于 iOS，安装 pods：
cd ios && npx pod-install
在之前的指南中， 开始使用, 您学习了如何使用 initializeParse 来启用与 Back4app 服务器的连接。设置您的 应用程序 ID 和 JavaScript 密钥 在位于 src/index.js: 
JS
1   // src/index.js
2   initializeParse(
3   'https://parseapi.back4app.com/',
4   'APPLICATION_ID',
5   'JAVASCRIPT_KEY'
6   );
1   // src/index.js
2   initializeParse(
3   'https://parseapi.back4app.com/',
4   'APPLICATION_ID',
5   'JAVASCRIPT_KEY'
6   );
﻿
继续运行项目:
# 对于 iOS
npx react-native run-ios

# 对于 Android
npx react-native run-android
之后，您将成功设置启动项目，应用程序将如下所示:
﻿
项目的目录结构:
react-native-todo-app
├── src/
│   ├── config/
│   │   └── ReactotronConfig.js
│   ├── images/
│   │   ├── back4app_logo.png
│   │   └── bg.jpg
│   ├── components/
│   │   └── CardTodoButton/
│   │       └── index.js // 卡片按钮项组件
│   │   └── Menu/
│   │       └── index.js // 带卡片按钮的菜单
│   │   └── TaskList/
│   │       └── index.js // 任务列表组件
│   ├── pages/
│   │   └── AddTodo/
│   │       └── index.js // 添加待办页面  
│   │   └── Learning/
│   │       └── index.js // 学习页面  
│   │   └── Main/
│   │       └── index.js // 主页面
│   │   └── Shopping/
│   │       └── index.js // 购物页面
│   │   └── Work/
│   │       └── index.js // 工作页面
│   ├── services/
│   │   └── api.js
│   ├── index.js // 应用程序入口
│   └── routes.js // 导航路由配置
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md
初始项目有 4 个主要页面:
学习页面: 显示属于学习类别的任务
购物页面: 显示属于购物类别的任务
工作页面: 显示属于工作类别的任务
添加待办页面: 创建新任务的基本表单
2 - 创建新任务
在待办事项应用程序中，一个常见的功能是允许用户创建新任务。为此，创建任务的功能将使用 Parse Javascript SDK 创建一个新的 Parse 对象并将其保存在 Back4app 上。在 AddTodo 页面中，您将有一个基本表单，包含一个输入框以插入任务描述，一些复选框以选择任务类别和一个提交按钮。在本教程中，您将创建 Parse.Object 用于任务，它将具有以下属性：
查看 Parse Javascript SDK 保存数据 指南以获取有关创建 Parse 对象的更多信息。 
JS
1	{
2	  description: 'simple string of task descrition',
3	  author: 'person creating the task',
4	  completed: false, // or true
5	  createdAt: Date, // automatically created by back4app
6	}
1	{
2	  description: 'simple string of task descrition',
3	  author: 'person creating the task',
4	  completed: false, // or true
5	  createdAt: Date, // automatically created by back4app
6	}
﻿
现在实现该方法，以便在用户点击提交时创建任务。在pages/AddTodo/index.js 组件中，让我们实现handleSubmit 方法：
JS
1	  async function handleSubmit() {
2	    try {
3	      const Task = new Parse.Object.extend('Task');
4	      // Create a new instance of that class.
5	      const task = new Task();
6	      task.set('description', description);
7	      task.set('category', category);
8	      task.set('author', 'Anonymous');
9	      task.set('completed', false);
10	      await task.save();
11	
12	      Alert.alert('New Task Created.');
13	    } catch (error) {
14	      console.log('Error while creating task: ', error);
15	    }
16	  }
1	  async function handleSubmit() {
2	    try {
3	      const Task = new Parse.Object.extend('Task');
4	      // Create a new instance of that class.
5	      const task = new Task();
6	      task.set('description', description);
7	      task.set('category', category);
8	      task.set('author', 'Anonymous');
9	      task.set('completed', false);
10	      await task.save();
11	
12	      Alert.alert('New Task Created.');
13	    } catch (error) {
14	      console.log('Error while creating task: ', error);
15	    }
16	  }
﻿
之后，您将能够创建一些任务。随意创建您想要的任务。在接下来的步骤中，您将查询它们。
﻿
3 - 查询和过滤任务
现在您已经创建了一些任务，是时候使用 Parse React Native Lib 了。您将编写一些查询并将它们传递给 useParseQuery 钩子。查询将列出学习类别中所有未完成的任务。这是钩子的第一个用例，您将通过设置 enableLiveQuery:false, 构建一个一次性获取查询，该查询在学习页面组件渲染时运行。 enableLiveQuery 默认是 true，更改为 false 将禁用实时更改订阅。
在 pages/Learning/index.js 组件中，让我们编写我们的 Parse.query:
JS
1     const Task = new Parse.Object.extend('Task');
2     const query = new Parse.Query(Task);
3     query.equalTo('completed', false);
4     query.equalTo('category', 'learning');
1     const Task = new Parse.Object.extend('Task');
2     const query = new Parse.Query(Task);
3     query.equalTo('completed', false);
4     query.equalTo('category', 'learning');
﻿
将查询作为参数传递给useParseQuery钩子:
const {results} = useParseQuery(query, {enableLiveQuery: false});
上述代码展示了 Parse hook 的基本用法。useParseQuery hook 是一个新的资源，您可以与任何 Parse.Query 一起使用。使用 所有 Parse.Query 功能 来检索您的数据对象，hook 将使这一体验更加出色。在获取结果后，将它们传递给 TaskList 组件以在应用程序中显示任务：
JS
1	//Learning/index.js
2	import React, {useEffect} from 'react';
3	import {ActivityIndicator} from 'react-native';
4	import TaskList from '../../components/TaskList';
5	import Parse from 'parse/react-native.js';
6	import {useParseQuery} from '@parse/react-native';
7	
8	const Learning = () => {
9	  const Task = new Parse.Object.extend('Task');
10	  const query = new Parse.Query(Task);
11	  query.equalTo('completed', false);
12	  query.equalTo('category', 'learning');
13	
14	  const {results, isLoading} = useParseQuery(query, {enableLiveQuery: false});
15	
16	  if (isLoading) {
17	    return <ActivityIndicator/>;
18	  }
19	
20	  return <TaskList todos={results} />;
21	};
22	
23	export default Learning;
1	//Learning/index.js
2	import React, {useEffect} from 'react';
3	import {ActivityIndicator} from 'react-native';
4	import TaskList from '../../components/TaskList';
5	import Parse from 'parse/react-native.js';
6	import {useParseQuery} from '@parse/react-native';
7	
8	const Learning = () => {
9	  const Task = new Parse.Object.extend('Task');
10	  const query = new Parse.Query(Task);
11	  query.equalTo('completed', false);
12	  query.equalTo('category', 'learning');
13	
14	  const {results, isLoading} = useParseQuery(query, {enableLiveQuery: false});
15	
16	  if (isLoading) {
17	    return <ActivityIndicator/>;
18	  }
19	
20	  return <TaskList todos={results} />;
21	};
22	
23	export default Learning;
﻿
您的应用程序应该成功显示任务列表，如下所示：
﻿
4 - 实时变化
您将要探索的第二个用法是实时更新。useParseQuery 钩子封装了 Parse Live Query，并提供开箱即用的实时变化支持。当将查询传递给钩子时，它会创建一个 WebSocket 连接与 Back4app LiveQuery 服务器进行通信，该服务器会自动同步。您将把此功能添加到购物类别的任务中。
重要的是要注意，Live Query 和 Back4App 子域名必须在您的 Back4app Dashboard 应用中启用。一旦您这样做，请将您的子域名 URL 添加到initializeParse，Parse React Native 钩子的结果将始终具有更新的数据。如果您不配置子域名，useParseQuery 钩子将无法实时检索数据。
JS
1	// src/index.js
2	initializeParse(
3	'<yoursubdomain>.b4a.io',
4	'APPLICATION_ID',
5	'JAVASCRIPT_KEY'
6	);
1	// src/index.js
2	initializeParse(
3	'<yoursubdomain>.b4a.io',
4	'APPLICATION_ID',
5	'JAVASCRIPT_KEY'
6	);
﻿
在pages/Shopping/index.js 组件中，让我们编写我们的Parse.query：
JS
1     const Task = new Parse.Object.extend('Task');
2     const query = new Parse.Query(Task);
3     query.equalTo('completed', false);
4     query.equalTo('category', 'shopping');
1     const Task = new Parse.Object.extend('Task');
2     const query = new Parse.Query(Task);
3     query.equalTo('completed', false);
4     query.equalTo('category', 'shopping');
﻿
然后，将查询作为参数传递给useParseQuery 钩子：
const {results, isLoading, isSyncing} = useParseQuery(query);
请注意，由于实时更改默认启用，因此无需额外的参数。获取结果后，将它们传递给TaskList组件以在应用程序中显示任务：
JS
1	import React from 'react';
2	import {ActivityIndicator} from 'react-native';
3	import TaskList from '../../components/TaskList';
4	import Parse from 'parse/react-native.js';
5	import {useParseQuery} from '@parse/react-native';
6	
7	const Shopping = () => {
8	  const Task = new Parse.Object.extend('Task');
9	  const query = new Parse.Query(Task);
10	  query.equalTo('completed', false);
11	  query.equalTo('category', 'shopping');
12	
13	  const {results, isLoading, isSyncing} = useParseQuery(query);
14	
15	  if (isLoading || isSyncing) {
16	    return <ActivityIndicator />;
17	  }
18	  return <TaskList todos={results || []} />;
19	};
20	
21	export default Shopping;
1	import React from 'react';
2	import {ActivityIndicator} from 'react-native';
3	import TaskList from '../../components/TaskList';
4	import Parse from 'parse/react-native.js';
5	import {useParseQuery} from '@parse/react-native';
6	
7	const Shopping = () => {
8	  const Task = new Parse.Object.extend('Task');
9	  const query = new Parse.Query(Task);
10	  query.equalTo('completed', false);
11	  query.equalTo('category', 'shopping');
12	
13	  const {results, isLoading, isSyncing} = useParseQuery(query);
14	
15	  if (isLoading || isSyncing) {
16	    return <ActivityIndicator />;
17	  }
18	  return <TaskList todos={results || []} />;
19	};
20	
21	export default Shopping;
﻿
5 - 离线支持
第三个用例是使用@parse/react-native进行查询结果的离线缓存。这在您的 React Native 应用程序需要在用户有网络延迟或互联网连接问题时工作时非常有用。离线支持提高了您的 React Native 应用程序的响应能力和用户体验。好消息是，不需要额外的步骤！离线优先的方法和实时订阅默认启用。
简而言之，简单使用useParseQuery钩子确保您的应用程序将缓存查询结果以支持离线，并结合实时查询订阅，当用户重新在线时使用。
6 - 限制和排序查询
假设工作类别的任务列表对一个人来说太多，您想仅显示其中的一部分以供当天使用。同时，按创建日期排序。
在pages/Shopping/index.js组件中，让我们编写我们的Parse.query：
JS
1     const Task = new Parse.Object.extend('Task');
2     const query = new Parse.Query(Task);
3     query.equalTo('completed', false);
4     query.equalTo('category', 'work');
5     query.ascending('createdAt'); // order by creation date
6     query.limit(5); // limit to 5 tasks
1     const Task = new Parse.Object.extend('Task');
2     const query = new Parse.Query(Task);
3     query.equalTo('completed', false);
4     query.equalTo('category', 'work');
5     query.ascending('createdAt'); // order by creation date
6     query.limit(5); // limit to 5 tasks
﻿
然后，将查询作为参数传递给 useParseQuery 钩子，并将它们传递给 TaskList 组件以在应用程序中显示任务:
JS
1	import React from 'react';
2	import {ActivityIndicator} from 'react-native';
3	import Parse from 'parse/react-native.js';
4	import {useParseQuery} from '@parse/react-native';
5	import TaskList from '../../components/TaskList';
6	// import { Container } from './styles';
7	
8	const Work = () => {
9	  const Task = new Parse.Object.extend('Task');
10	  const query = new Parse.Query(Task);
11	  query.equalTo('completed', false);
12	  query.equalTo('category', 'work');
13	  query.ascending('createdAt');
14	  query.limit(5);
15	
16	  const {results, isLoading} = useParseQuery(query, {
17	    enableLiveQuery: false,
18	  });
19	
20	  if (isLoading) {
21	    return <ActivityIndicator />;
22	  }
23	  return <TaskList todos={results} />;
24	};
25	
26	export default Work;
1	import React from 'react';
2	import {ActivityIndicator} from 'react-native';
3	import Parse from 'parse/react-native.js';
4	import {useParseQuery} from '@parse/react-native';
5	import TaskList from '../../components/TaskList';
6	// import { Container } from './styles';
7	
8	const Work = () => {
9	  const Task = new Parse.Object.extend('Task');
10	  const query = new Parse.Query(Task);
11	  query.equalTo('completed', false);
12	  query.equalTo('category', 'work');
13	  query.ascending('createdAt');
14	  query.limit(5);
15	
16	  const {results, isLoading} = useParseQuery(query, {
17	    enableLiveQuery: false,
18	  });
19	
20	  if (isLoading) {
21	    return <ActivityIndicator />;
22	  }
23	  return <TaskList todos={results} />;
24	};
25	
26	export default Work;
﻿
7 - 指定 useParseQuery 参数
您使用了 @parse/react-native 从 Back4app 检索数据，具有之前步骤中的实时查询等功能。因此，需要对导出的接口进行解释。 useParseQuery 钩子接受一个 Parse.Query 和一个 UseParseQueryOptions 对象作为其参数。默认的可选配置对象如下:
JS
1   {
2     enableLiveQuery: true,
3     enableLocalDatastore: true,
4     initialLoad: []
5   }
1   {
2     enableLiveQuery: true,
3     enableLocalDatastore: true,
4     initialLoad: []
5   }
﻿
enableLiveQuery: 实时查询功能默认启用
enableLocalDatastore: 启用数据结果的本地缓存，默认是 true 但您可以通过设置为 false﻿
initialLoad: 如果您已经在内存中加载了一些数据，则可以设置它们以向用户显示数据的预览。
完成！
此时，您已经学习了如何通过在 Back4App 上创建一个 React Native 待办事项应用来使用 @parse/react-native 库。
更新日期 27 Jan 2025
此页面是否对您有帮助？
上一个
使用Parse React Native实时更新实现最佳实践
下一个
React Native 使用 Parse SDK 实现用户注册