React Native
...
Parse SDK (REST)
Data objects
React Native中使用Parse进行基本数据查询指南
11min
在本指南中，您将执行 Parse 中的基本查询，并使用这些查询实现一个 React Native 组件。您将学习如何使用 Back4App 和 React Native 设置和查询真实数据。
从 React Native 应用程序查询存储在 Back4App 上的数据。
任何 Parse 查询操作都使用 Parse.Query 对象类型，这将帮助您在整个应用程序中从数据库中检索特定数据。了解 Parse.Query 仅在调用检索方法（如 Parse.Query.find 或 Parse.Query.get）后才会解析，因此可以设置查询并在实际调用之前链接多个修饰符。
要创建一个新的 Parse.Query，您需要将所需的 Parse.Object 子类作为参数传递，这将包含您的查询结果。下面可以看到一个示例查询，其中查询了一个虚构的 Profile 子类。
JS
11 // This will create your query
22 let parseQuery = new Parse.Query("Profile");
33 // The query will resolve only after calling this method
44 let queryResult = await parseQuery.find();
您可以在官方文档中阅读更多关于 Parse.Query 类的信息，在这里查看官方文档。
让我们创建一个 Profile 类，这将是我们在本指南中查询的目标。在 Parse JS 控制台中，可以直接运行 JavaScript 代码，使用 JS SDK 命令查询和更新您的应用程序数据库内容。从您的 JS 控制台运行下面的代码并在 Back4App 中插入数据。
以下是您的仪表板中 JS 控制台的样子：
继续创建用户 Profile 类，内容如下示例：
JS
11 // Add Profile objects and create table
22 // Adam Sandler
33 let Profile = new Parse.Object('Profile');
44 Profile.set('name', 'Adam Sandler');
55 Profile.set('birthDay', new Date('09/09/1966'));
66 Profile.set('friendCount', 2);
77 Profile.set('favoriteFoods', ['Lobster', 'Bread']);
88 await Profile.save();
99
1010 // Adam Levine
1111 Profile = new Parse.Object('Profile');
1212 Profile.set('name', 'Adam Levine');
1313 Profile.set('birthDay', new Date('03/18/1979'));
1414 Profile.set('friendCount', 52);
1515 Profile.set('favoriteFoods', ['Cake', 'Bread']);
1616 await Profile.save();
1717
1818 // Carson Kressley
1919 Profile = new Parse.Object('Profile');
2020 Profile.set('name', 'Carson Kressley');
2121 Profile.set('birthDay', new Date('11/11/1969'));
2222 Profile.set('friendCount', 12);
2323 Profile.set('favoriteFoods', ['Fish', 'Cookies']);
2424 await Profile.save();
2525
2626 // Dan Aykroyd
2727 Profile = new Parse.Object('Profile');
2828 Profile.set('name', 'Dan Aykroyd');
2929 Profile.set('birthDay', new Date('07/01/1952'));
3030 Profile.set('friendCount', 66);
3131 Profile.set('favoriteFoods', ['Jam', 'Peanut Butter']);
3232 await Profile.save();
3333
3434 // Eddie Murphy
3535 Profile = new Parse.Object('Profile');
3636 Profile.set('name', 'Eddie Murphy');
3737 Profile.set('birthDay', new Date('04/03/1961'));
3838 Profile.set('friendCount', 49);
3939 Profile.set('favoriteFoods', ['Lettuce', 'Pepper']);
4040 await Profile.save();
4141
4242 // Fergie
4343 Profile = new Parse.Object('Profile');
4444 Profile.set('name', 'Fergie');
4545 Profile.set('birthDay', new Date('03/27/1975'));
4646 Profile.set('friendCount', 55);
4747 Profile.set('favoriteFoods', ['Lobster', 'Shrimp']);
4848 await Profile.save();
4949
5050 console.log('Success!');
现在您已经有了一个填充的类，我们可以在其中执行一些基本查询。让我们开始通过名称过滤 Profile 结果，这是一个字符串类型字段，搜索包含名称 亚当 的值，使用 Parse.Query.contains 方法:
JS
11 // Create your query
22 let parseQuery = new Parse.Query('Profile');
33
44 // `contains` is a basic query method that checks if string field
55 // contains a specific substring
66 parseQuery.contains('name', 'Adam');
77
88 // The query will resolve only after calling this method, retrieving
99 // an array of `Parse.Objects`
1010 let queryResults = await parseQuery.find();
1111
1212 // Let's show the results
1313 for (let result of queryResults) {
1414 // You access `Parse.Objects` attributes by using `.get`
1515 console.log(result.get('name'));
1616 };
现在让我们通过数字类型字段 friendCount 使用另一个常见的查询方法， Parse.Query.greaterThan。在这种情况下，我们想要用户 Profiles 的朋友数量大于 20.
JS
11 // Create your query
22 let parseQuery = new Parse.Query('Profile');
33
44 // `greaterThan` is a basic query method that does what it
55 // says on the tin
66 parseQuery.greaterThan('friendCount', 20);
77
88 // The query will resolve only after calling this method, retrieving
99 // an array of `Parse.Objects`
1010 let queryResults = await parseQuery.find();
1111
1212 // Let's show the results
1313 for (let result of queryResults) {
1414 // You access `Parse.Objects` attributes by using `.get`
1515 console.log(`name: ${result.get('name')}, friend count: ${result.get('friendCount')}`);
1616 };
其他常见的查询方法是 Parse.Query.ascending 和 Parse.Query.descending, 负责对你的查询进行排序。这个排序可以在大多数数据类型中进行，所以让我们按 birthDay 字段按最年轻的进行排序。
JS
11 // Create your query
22 let parseQuery = new Parse.Query('Profile');
33
44 // `descending` and `ascending` can and should be chained
55 // with other query methods to improve your queries
66 parseQuery.descending('birthDay');
77
88 // The query will resolve only after calling this method, retrieving
99 // an array of `Parse.Objects`
1010 let queryResults = await parseQuery.find();
1111
1212 // Let's show the results
1313 for (let result of queryResults) {
1414 // You access `Parse.Objects` attributes by using `.get`
1515 console.log(`name: ${result.get('name')}, birthday: ${result.get('birthDay')}`);
1616 };
如前所述，你可以并且应该链式调用查询方法，以获得更精细的结果。接下来，让我们将之前的示例结合在一个查询请求中:
JS
11 // Create your query
22 let parseQuery = new Parse.Query('Profile');
33
44 parseQuery.contains('name', 'Adam');
55 parseQuery.greaterThan('friendCount', 20);
66 parseQuery.descending('birthDay');
77
88 // The query will resolve only after calling this method, retrieving
99 // an array of `Parse.Objects`
1010 let queryResults = await parseQuery.find();
1111
1212 // Let's show the results
1313 for (let result of queryResults) {
1414 // You access `Parse.Objects` attributes by using `.get`
1515 console.log(`name: ${result.get('name')}, friend count: ${result.get('friendCount')}, birthday: ${result.get('birthDay')}`);
1616 };
现在让我们在 React Native 中的一个组件内使用我们的示例查询，界面简单，包含一个显示结果的列表和 4 个用于调用查询的按钮。组件代码的布局如下，请注意 doQuery 函数，包含之前的示例代码形式。
JavaScript
TypeScript
11 import React, {useState} from 'react';
22 import {Alert, Image, View, ScrollView, StyleSheet} from 'react-native';
33 import Parse from 'parse/react-native';
44 import {
55 List,
66 Title,
77 Button as PaperButton,
88 Text as PaperText,
99 } from 'react-native-paper';
1010
1111 export const BookList = () => {
1212 // State variable
1313 const [queryResults, setQueryResults] = useState(null);
1414
1515 const doQueryByName = async function () {
1616 // Create our Parse.Query instance so methods can be chained
1717 // Reading parse objects is done by using Parse.Query
1818 const parseQuery = new Parse.Query('Profile');
1919
2020 // `contains` is a basic query method that checks if string field
2121 // contains a specific substring
2222 parseQuery.contains('name', 'Adam');
2323
2424 try {
2525 let profiles = await parseQuery.find();
2626 setQueryResults(profiles);
2727 return true;
2828 } catch (error) {
2929 // Error can be caused by lack of Internet connection
3030 Alert.alert('Error!', error.message);
3131 return false;
3232 }
3333 };
3434
3535 const doQueryByFriendCount = async function () {
3636 // Create our Parse.Query instance so methods can be chained
3737 // Reading parse objects is done by using Parse.Query
3838 const parseQuery = new Parse.Query('Profile');
3939
4040 // `greaterThan` is a basic query method that does what it
4141 // says on the tin
4242 parseQuery.greaterThan('friendCount', 20);
4343
4444 try {
4545 let profiles = await parseQuery.find();
4646 setQueryResults(profiles);
4747 return true;
4848 } catch (error) {
4949 // Error can be caused by lack of Internet connection
5050 Alert.alert('Error!', error.message);
5151 return false;
5252 }
5353 };
5454
5555 const doQueryByOrdering = async function () {
5656 // Create our Parse.Query instance so methods can be chained
5757 // Reading parse objects is done by using Parse.Query
5858 const parseQuery = new Parse.Query('Profile');
5959
6060 // `descending` and `ascending` can and should be chained
6161 // with other query methods to improve your queries
6262 parseQuery.descending('birthDay');
6363
6464 try {
6565 let profiles = await parseQuery.find();
6666 setQueryResults(profiles);
6767 return true;
6868 } catch (error) {
6969 // Error can be caused by lack of Internet connection
7070 Alert.alert('Error!', error.message);
7171 return false;
7272 }
7373 };
7474
7575 const doQueryByAll = async function () {
7676 // Create our Parse.Query instance so methods can be chained
7777 // Reading parse objects is done by using Parse.Query
7878 const parseQuery = new Parse.Query('Profile');
7979
8080 parseQuery.contains('name', 'Adam');
8181 parseQuery.greaterThan('friendCount', 20);
8282 parseQuery.descending('birthDay');
8383
8484 try {
8585 let profiles = await parseQuery.find();
8686 setQueryResults(profiles);
8787 return true;
8888 } catch (error) {
8989 // Error can be caused by lack of Internet connection
9090 Alert.alert('Error!', error.message);
9191 return false;
9292 }
9393 };
9494
9595 const clearQueryResults = async function () {
9696 setQueryResults(null);
9797 return true;
9898 };
9999
100100 return (
101101 <>
102102 <View style={Styles.header}>
103103 <Image
104104 style={Styles.header_logo}
105105 source={ {
106106 uri:
107107 'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
108108 } }
109109 />
110110 <PaperText style={Styles.header_text}>
111111 <PaperText style={Styles.header_text_bold}>
112112 {'React Native on Back4App - '}
113113 </PaperText>
114114 {' Basic Queries'}
115115 </PaperText>
116116 </View>
117117 <ScrollView style={Styles.wrapper}>
118118 <View>
119119 <Title>{'Result List'}</Title>
120120 {/* Book list */}
121121 {queryResults !== null &&
122122 queryResults !== undefined &&
123123 queryResults.map((profile) => (
124124 <List.Item
125125 key={profile.id}
126126 title={profile.get('name')}
127127 description={`Friend count: ${profile.get(
128128 'friendCount',
129129 )}, Birthday: ${profile.get('birthDay')}`}
130130 titleStyle={Styles.list_text}
131131 style={Styles.list_item}
132132 />
133133 ))}
134134 {queryResults === null ||
135135 queryResults === undefined ||
136136 (queryResults !== null &&
137137 queryResults !== undefined &&
138138 queryResults.length <= 0) ? (
139139 <PaperText>{'No results here!'}</PaperText>
140140 ) : null}
141141 </View>
142142 <View>
143143 <Title>{'Query buttons'}</Title>
144144 <PaperButton
145145 onPress={() => doQueryByName()}
146146 mode="contained"
147147 icon="search-web"
148148 color={'#208AEC'}
149149 style={Styles.list_button}>
150150 {'Query by name'}
151151 </PaperButton>
152152 <PaperButton
153153 onPress={() => doQueryByFriendCount()}
154154 mode="contained"
155155 icon="search-web"
156156 color={'#208AEC'}
157157 style={Styles.list_button}>
158158 {'Query by friend count'}
159159 </PaperButton>
160160 <PaperButton
161161 onPress={() => doQueryByOrdering()}
162162 mode="contained"
163163 icon="search-web"
164164 color={'#208AEC'}
165165 style={Styles.list_button}>
166166 {'Query by ordering'}
167167 </PaperButton>
168168 <PaperButton
169169 onPress={() => doQueryByAll()}
170170 mode="contained"
171171 icon="search-web"
172172 color={'#208AEC'}
173173 style={Styles.list_button}>
174174 {'Query by all'}
175175 </PaperButton>
176176 <PaperButton
177177 onPress={() => clearQueryResults()}
178178 mode="contained"
179179 icon="delete"
180180 color={'#208AEC'}
181181 style={Styles.list_button}>
182182 {'Clear Results'}
183183 </PaperButton>
184184 </View>
185185 </ScrollView>
186186 </>
187187 );
188188 };
189189
190190 // These define the screen component styles
191191 const Styles = StyleSheet.create({
192192 header: {
193193 alignItems: 'center',
194194 paddingTop: 30,
195195 paddingBottom: 50,
196196 backgroundColor: '#208AEC',
197197 },
198198 header_logo: {
199199 height: 50,
200200 width: 220,
201201 resizeMode: 'contain',
202202 },
203203 header_text: {
204204 marginTop: 15,
205205 color: '#f0f0f0',
206206 fontSize: 16,
207207 },
208208 header_text_bold: {
209209 color: '#fff',
210210 fontWeight: 'bold',
211211 },
212212 wrapper: {
213213 width: '90%',
214214 alignSelf: 'center',
215215 },
216216 list_button: {
217217 marginTop: 6,
218218 marginLeft: 15,
219219 height: 40,
220220 },
221221 list_item: {
222222 borderBottomWidth: 1,
223223 borderBottomColor: 'rgba(0, 0, 0, 0.12)',
224224 },
225225 list_text: {
226226 fontSize: 15,
227227 },
228228 });
这是组件在渲染和通过所有查询函数查询后应该呈现的样子:
在本指南的最后，您了解了基本数据查询在 Parse 上是如何工作的，以及如何在 React Native 应用程序中在 Back4App 上执行这些查询。在下一个指南中，您将探索 Parse.Query 的全部潜力，使用此类中可用的所有方法。
更新日期 27 Jan 2025
此页面是否对您有帮助？