使用Parse React Native实时更新实现最佳实践

9min
使用 Parse 的 React hook 进行实时更新入门
介绍
欢迎使用 Parse React Native 库！在本指南中，您将了解 Parse React 库是什么，如何在您的 React Native 项目中安装和开始使用它。
动机
将 Parse/Back4App 集成到基于 Javascript 的项目中最简单的方法是通过 Parse Javascript SDK. 该库适用于多种 Javascript 环境，如 NodeJS、ReactJS、VueJS、AngularJS、React-Native，并为您提供对 Back4App 功能的访问。
Parse React Native 的目标是通过提供一个轻量级且易于使用的层，使 React Native 开发者的体验更好，该层提供最小的配置、代码重用和 Android 和 iOS 的原生优化。
使用此包将确保设置凭据、HTTP 请求、实时同步、离线优先交互等项目自动可用于您的 React Native 应用。该库完全用 Typescript 编写，基于 Parse Javascript SDK, 目前处于 Alpha 版本。
在本初始指南中，您将安装并设置 @parse/react-native 库在您的 React Native 项目中。
Parse React Native 目前处于 Alpha 版本。该库正在测试中，因此我们建议谨慎使用。我们非常感谢您的反馈，因此请随时使用该库，并通过发送电子邮件至 [email protected] 向我们提出您的问题和初步印象。
前提条件
要完成本教程，您需要：
在 Back4App 上创建的应用：
遵循 启用实时查询 教程。
﻿安装 Npm  或 yarn：
﻿安装 Npx  包运行器。
1 - 安装
如果您没有 React Native 应用，请使用以下命令行创建一个新项目，使用 npx 包运行器：
npx react-native init startWithParseRN
在您的 React Native 应用中安装 @parse/react-native 及其对等依赖 parse：
# 使用 yarn
yarn add @parse/react-native parse

# 使用 npm
npm install --save @parse/react-native parse
2 - 应用设置
为了让应用安全地连接到 Back4App 服务器，您必须向 Parse JavaScript SDK 提供应用的凭据。
JS
1	//In your App.js
2	import { initializeParse } from  '@parse/react-native';
3	
4	initializeParse(
5	  'https://YOUR-SUBDOMAIN.b4a.io/',
6	  'APPLICATION_ID',
7	  'JAVASCRIPT_KEY'
8	);
1	//In your App.js
2	import { initializeParse } from  '@parse/react-native';
3	
4	initializeParse(
5	  'https://YOUR-SUBDOMAIN.b4a.io/',
6	  'APPLICATION_ID',
7	  'JAVASCRIPT_KEY'
8	);
﻿
你可以找到你的应用程序 ID 和 JavaScript 密钥 凭据，通过打开你的应用程序 仪表板 在 Back4App 网站 并点击 应用程序设置 > 核心设置, 在 服务器设置 下.
你的子域名必须在 应用程序设置 > 核心设置 > 服务器 URL 和实时查询. 有关更多信息，请查看此指南 这里.
3 - 创建你的第一个查询
接下来，你将构建你的第一个查询并在你的应用程序中显示它。 @parse/react-native 库导出了一个 useParseQuery 钩子，因此你不会浪费时间去研究如何实现离线支持、实时更改等功能.
它需要一个 Parse.Query 并返回一个对象，其中包含一些属性，您可以使用这些属性访问查询返回的数据：
JS
1	// In your App.js
2	
3	import React from 'react';
4	import { ActivityIndicator, FlatList, View,Text } from 'react-native';
5	import { initializeParse, useParseQuery } from  '@parse/react-native';
6	
7	// remember to call initializeParse with your credentials before using useParseQuery
8	initializeParse(
9	  'https://YOUR-SUBDOMAIN.b4a.io/',
10	  'APPLICATION_ID',
11	  'JAVASCRIPT_KEY'
12	);
13	
14	export default function App() {
15	 const parseQuery = new Parse.Query('Todo');
16	 const {
17	  isLive,
18	  isLoading,
19	  isSyncing,
20	  results,
21	  count,
22	  error,
23	  reload
24	 } = useParseQuery(parseQuery);
25	
26	if (isLoading) {
27	  return <ActivityIndicator/>;
28	}
29	
30	return (
31	<FlatList
32	   data={results}
33	   renderItem={({item}) => (
34	   <View
35	     style={ {
36	      height:  70,
37	      flex:  1,
38	      alignItems:  'center',
39	      justifyContent:  'center',
40	    } }>
41	      <Text>Task: {item.get('title')}</Text>
42	   </View>
43	)}
44	/>);
45	}
1	// In your App.js
2	
3	import React from 'react';
4	import { ActivityIndicator, FlatList, View,Text } from 'react-native';
5	import { initializeParse, useParseQuery } from  '@parse/react-native';
6	
7	// remember to call initializeParse with your credentials before using useParseQuery
8	initializeParse(
9	  'https://YOUR-SUBDOMAIN.b4a.io/',
10	  'APPLICATION_ID',
11	  'JAVASCRIPT_KEY'
12	);
13	
14	export default function App() {
15	 const parseQuery = new Parse.Query('Todo');
16	 const {
17	  isLive,
18	  isLoading,
19	  isSyncing,
20	  results,
21	  count,
22	  error,
23	  reload
24	 } = useParseQuery(parseQuery);
25	
26	if (isLoading) {
27	  return <ActivityIndicator/>;
28	}
29	
30	return (
31	<FlatList
32	   data={results}
33	   renderItem={({item}) => (
34	   <View
35	     style={ {
36	      height:  70,
37	      flex:  1,
38	      alignItems:  'center',
39	      justifyContent:  'center',
40	    } }>
41	      <Text>Task: {item.get('title')}</Text>
42	   </View>
43	)}
44	/>);
45	}
﻿
在将查询传递给钩子时，它将首先查找可能已存储的缓存结果。然后，它创建一个 WebSocket 连接与 Back4app LiveQuery 服务器进行通信，该服务器会自动同步。换句话说，离线优先的方法和实时更改默认启用。
要检查查询状态，请使用 props 钩子返回的内容：
﻿IsLive: 如果true, 表示查询已订阅实时更新。
﻿isLoading: 如果true, 查询正在获取结果。
﻿isSyncing: 如果true, 查询正在从 Back4app 服务器获取更新结果。
﻿results: 这是查询返回的数据。
﻿count: 表示与查询匹配的对象数量。
﻿error: 当查询出现问题时，它会返回一个错误。
﻿reload: 重新加载您的查询结果。
该 useParseQuery 接受任何 Parse.Query，您可以查看 完整文档，其中包含有关 Parse 查询的示例。
4 - 测试应用程序钩子
现在您应该能够运行您的 React Native 应用程序并查看结果。
# 在 Android 上
npx react-native run-android

# 在 iOS 上
npx react-native run-ios
请记住，您应该向您的 Back4app 项目添加一些数据，以便在您的应用中看到一些项目。
完成了！
此时，您已经在项目中安装了 @parse/react-native，配置了与 Back4App 的连接，并编写了您的第一个查询。在下一个指南中，您将看到这个库的主要功能之一，如何使用它。让我们继续到 “实时变化” 开始编写更多查询。
更新日期 27 Jan 2025
此页面是否对您有帮助？
上一个
在Parse中实现关系型连接查询的技术指南
下一个
使用Parse库构建实时React Native应用教程