如何在React Native中使用Parse进行地理定位查询

9min
使用 React Native 地理定位通过 Parse 执行地理查询
介绍
在本指南中，您将使用 React Native 地理定位在 Parse 中执行地理查询。您将实现一个使用这些查询的 React Native 组件，并学习如何使用 Back4App 和 React Native 设置和查询真实数据。
先决条件
要完成本教程，您需要：
一个已创建并连接到 Back4App 的 React Native 应用程序。
如果您想测试/使用本指南提供的屏幕布局，您应该设置react-native-paper﻿库，还需要 react-native-geolocation-service。
目标
使用存储在 Back4App 上的地理点和 React Native 地理定位执行地理查询。
- 理解 Parse.Query 类
任何 Parse 查询操作都使用 Parse.Query 对象类型，这将帮助您在应用程序中从数据库中检索特定数据。重要的是要知道，只有在调用检索方法（如 Parse.Query.find 或 Parse.Query.get）后，Parse.Query 才会解析，因此可以在实际调用之前设置查询并链接多个修饰符。
要创建一个新的 Parse.Query，您需要作为参数传递所需的 Parse.Object 子类，它将包含您的查询结果。下面可以看到一个示例查询，其中查询了一个虚构的 Profile 子类。
JS
 // This will create your query
 let parseQuery = new Parse.Query("Profile");
 // The query will resolve only after calling this method
 let queryResult = await parseQuery.find();
 // This will create your query
 let parseQuery = new Parse.Query("Profile");
 // The query will resolve only after calling this method
 let queryResult = await parseQuery.find();
﻿
您可以在官方文档中阅读更多关于 Parse.Query 类的信息，请点击这里查看官方文档。
- 在 Back4App 上保存一些数据
让我们创建一个 City 类，它将是我们在本指南中查询的目标。在 Parse JS 控制台中，可以直接运行 JavaScript 代码，使用 JS SDK 命令查询和更新您的应用程序数据库内容。从您的 JS 控制台运行下面的代码并在 Back4App 中插入数据。
以下是您的仪表板中 JS 控制台的样子：
﻿
继续创建 City 类，内容如下示例：
JS
// Add City objects and create table
// Note how GeoPoints are created, passing latitude and longitude as arguments
// Montevideo
City = new Parse.Object('City');
City.set('name', 'Montevideo - Uruguay');
City.set('location', new Parse.GeoPoint(-34.85553195363169, -56.207280375137955));
await City.save();

// Brasília
City = new Parse.Object('City');
City.set('name', 'Brasília - Brazil');
City.set('location', new Parse.GeoPoint(-15.79485821477289, -47.88391074690196));
await City.save();

// Bogotá
City = new Parse.Object('City');
City.set('name', 'Bogotá - Colombia');
City.set('location', new Parse.GeoPoint(4.69139880891712, -74.06936691331047));
await City.save();

// Mexico City
City = new Parse.Object('City');
City.set('name', 'Mexico City - Mexico');
City.set('location', new Parse.GeoPoint(19.400977162618933, -99.13311378164776));
await City.save();

// Washington, D.C.
City = new Parse.Object('City');
City.set('name', 'Washington, D.C. - USA');
City.set('location', new Parse.GeoPoint(38.930727220189944, -77.04626261880388));
await City.save();

// Ottawa
City = new Parse.Object('City');
City.set('name', 'Ottawa - Canada');
City.set('location', new Parse.GeoPoint(45.41102167733425, -75.695414598736));
await City.save();

console.log('Success!');
// Add City objects and create table
// Note how GeoPoints are created, passing latitude and longitude as arguments
// Montevideo
City = new Parse.Object('City');
City.set('name', 'Montevideo - Uruguay');
City.set('location', new Parse.GeoPoint(-34.85553195363169, -56.207280375137955));
await City.save();

// Brasília
City = new Parse.Object('City');
City.set('name', 'Brasília - Brazil');
City.set('location', new Parse.GeoPoint(-15.79485821477289, -47.88391074690196));
await City.save();

// Bogotá
City = new Parse.Object('City');
City.set('name', 'Bogotá - Colombia');
City.set('location', new Parse.GeoPoint(4.69139880891712, -74.06936691331047));
await City.save();

// Mexico City
City = new Parse.Object('City');
City.set('name', 'Mexico City - Mexico');
City.set('location', new Parse.GeoPoint(19.400977162618933, -99.13311378164776));
await City.save();

// Washington, D.C.
City = new Parse.Object('City');
City.set('name', 'Washington, D.C. - USA');
City.set('location', new Parse.GeoPoint(38.930727220189944, -77.04626261880388));
await City.save();

// Ottawa
City = new Parse.Object('City');
City.set('name', 'Ottawa - Canada');
City.set('location', new Parse.GeoPoint(45.41102167733425, -75.695414598736));
await City.save();

console.log('Success!');
﻿
- 查询数据
现在您已经有了一个填充的类，我们可以在其中执行一些GeoPoint查询。让我们开始按距离从牙买加金斯敦（纬度18.01808695059913和经度-76.79894232253473）最近的结果进行排序，使用 City 方法:
JS
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint for the query
let kingstonGeoPoint = new Parse.GeoPoint(18.018086950599134, -76.79894232253473);

// `near` will order results based on distance between the GeoPoint type field from the class and the GeoPoint argument
parseQuery.near('location', kingstonGeoPoint);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint for the query
let kingstonGeoPoint = new Parse.GeoPoint(18.018086950599134, -76.79894232253473);

// `near` will order results based on distance between the GeoPoint type field from the class and the GeoPoint argument
parseQuery.near('location', kingstonGeoPoint);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
现在让我们使用方法Parse.Query.withinKilometers, 这将检索所有GeoPoint字段位于最大距离内的结果。金斯敦将再次作为参考，距离限制为3000公里。
JS
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint for the query
let kingstonGeoPoint = new Parse.GeoPoint(18.018086950599134, -76.79894232253473);

// You can also use `withinMiles` and `withinRadians` the same way,
// but with different measuring unities
parseQuery.withinKilometers('location', kingstonGeoPoint, 3000);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint for the query
let kingstonGeoPoint = new Parse.GeoPoint(18.018086950599134, -76.79894232253473);

// You can also use `withinMiles` and `withinRadians` the same way,
// but with different measuring unities
parseQuery.withinKilometers('location', kingstonGeoPoint, 3000);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
另一个有用的查询方法是Parse.Query.withinPolygon, 它将查询 GeoPoint 字段值在指定多边形内的结果，该多边形由一个 GeoPoints 数组组成（至少三个）。如果多边形路径是开放的，Parse 会自动通过连接最后一个和第一个点来关闭它。
在这个例子中，你将使用一个简单的多边形，大致包含南美洲大陆，由 5 个远离海洋的 GeoPoints 组成。
JS
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint polygon for the query
let geoPoint1 = new Parse.GeoPoint(15.822238344514378, -72.42845934415942);
let geoPoint2 = new Parse.GeoPoint(-0.7433770196268968, -97.44765968406668);
let geoPoint3 = new Parse.GeoPoint(-59.997149373299166, -76.52969196322749);
let geoPoint4 = new Parse.GeoPoint(-9.488786415007201, -18.346101586021952);
let geoPoint5 = new Parse.GeoPoint(15.414859532811047, -60.00625459569375);

// Note that the polygon is merely an array of GeoPoint objects and that the first and last are not connected, so Parse connects them for you
parseQuery.withinPolygon('location', [geoPoint1, geoPoint2, geoPoint3, geoPoint4, geoPoint5]);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint polygon for the query
let geoPoint1 = new Parse.GeoPoint(15.822238344514378, -72.42845934415942);
let geoPoint2 = new Parse.GeoPoint(-0.7433770196268968, -97.44765968406668);
let geoPoint3 = new Parse.GeoPoint(-59.997149373299166, -76.52969196322749);
let geoPoint4 = new Parse.GeoPoint(-9.488786415007201, -18.346101586021952);
let geoPoint5 = new Parse.GeoPoint(15.414859532811047, -60.00625459569375);

// Note that the polygon is merely an array of GeoPoint objects and that the first and last are not connected, so Parse connects them for you
parseQuery.withinPolygon('location', [geoPoint1, geoPoint2, geoPoint3, geoPoint4, geoPoint5]);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
- 从 React Native 组件查询
现在让我们在 React Native 组件中使用我们的示例查询，界面简单，包含一个显示结果的列表和三个用于调用查询的按钮。该组件还使用react-native-geolocation-service来获取设备的当前位置，因此查询将使用真实数据。
这就是组件代码的布局方式，请注意 doQuery 函数，包含之前的示例代码形式。
JavaScript
TypeScript
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 Image,
 View,
 PermissionsAndroid,
 Platform,
 ScrollView,
 StyleSheet,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';
import Geolocation from 'react-native-geolocation-service';

export const QueryList: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);

 // This function asks for location permission on iOS and Android
 const requestLocationPermissions = async () => {
   if (Platform.OS === 'ios') {
     // iOS can be asked always, since the OS handles if user already gave permission
     await Geolocation.requestAuthorization('whenInUse');
   } else if (Platform.OS === 'android') {
     let permissionCheck: boolean = await PermissionsAndroid.check(
       PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
     );
     // Only asks for permission on Android if not given before
     if (permissionCheck !== true) {
       await PermissionsAndroid.request(
         PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
         {
           title: 'Location Permission Request',
           message:
             'This app needs you permission for using your location for querying GeoPoints in Parse!',
           buttonPositive: 'OK',
         },
       );
     }
   }
 };

 const doQueryNear = async function (): Promise<boolean> {
   // Request location permissions
   await requestLocationPermissions();
   // Get current location and create the GeoPoint for the query
   Geolocation.getCurrentPosition(
     async (currentPosition: {
       coords: {latitude: number; longitude: number};
     }) => {
       // Create our GeoPoint
       let currentLocationGeoPoint: Parse.GeoPoint = new Parse.GeoPoint(
         currentPosition.coords.latitude,
         currentPosition.coords.longitude,
       );

       // Create our query
       let parseQuery: Parse.Query = new Parse.Query('City');

       // `near` will order results based on distance between the GeoPoint type field from the class and the GeoPoint argument
       parseQuery.near('location', currentLocationGeoPoint);

       try {
         let results: [Parse.Object] = await parseQuery.find();
         // Set query results to state variable
         setQueryResults(results);
       } catch (error) {
         // Error can be caused by lack of Internet connection
         Alert.alert('Error!', error.message);
       }
     },
     _error => {
       Alert.alert(
         'Error!',
         'This app needs your location permission to query this!',
       );
     },
     {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
   );
   return true;
 };

 const doQueryWithinKilometers = async function (): Promise<boolean> {
   // Request location permissions
   await requestLocationPermissions();
   // Get current location and create the GeoPoint for the query
   Geolocation.getCurrentPosition(
     async (currentPosition: {
       coords: {latitude: number; longitude: number};
     }) => {
       // Create our GeoPoint
       let currentLocationGeoPoint: Parse.GeoPoint = new Parse.GeoPoint(
         currentPosition.coords.latitude,
         currentPosition.coords.longitude,
       );

       // Create our query
       let parseQuery: Parse.Query = new Parse.Query('City');

       // You can also use `withinMiles` and `withinRadians` the same way,
       // but with different measuring unities
       parseQuery.withinKilometers('location', currentLocationGeoPoint, 3000);

       try {
         let results: [Parse.Object] = await parseQuery.find();
         // Set query results to state variable
         setQueryResults(results);
       } catch (error) {
         // Error can be caused by lack of Internet connection
         Alert.alert('Error!', error.message);
       }
     },
     _error => {
       Alert.alert(
         'Error!',
         'This app needs your location permission to query this!',
       );
     },
     {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
   );
   return true;
 };

 const doQueryWithinPolygon = async function (): Promise<boolean> {
   // Create our GeoPoint polygon points
   let geoPoint1: Parse.GeoPoint = new Parse.GeoPoint(
15.822.238.344.514.300,00
-7.242.845.934.415.940,00
   );
   let geoPoint2: Parse.GeoPoint = new Parse.GeoPoint(
     -0.7433770196268968,
-9.744.765.968.406.660,00
   );
   let geoPoint3: Parse.GeoPoint = new Parse.GeoPoint(
-59.997.149.373.299.100,00
-7.652.969.196.322.740,00
   );
   let geoPoint4: Parse.GeoPoint = new Parse.GeoPoint(
-9.488.786.415.007.200,00
-18.346.101.586.021.900,00
   );
   let geoPoint5: Parse.GeoPoint = new Parse.GeoPoint(
15.414.859.532.811.000,00
-6.000.625.459.569.370,00
   );

   // Create our query
   let parseQuery: Parse.Query = new Parse.Query('City');

   // Note that the polygon is merely an array of GeoPoint objects and that the first and last are not connected, so Parse connects them for you
   parseQuery.withinPolygon('location', [
     geoPoint1,
     geoPoint2,
     geoPoint3,
     geoPoint4,
     geoPoint5,
   ]);

   try {
     let results: [Parse.Object] = await parseQuery.find();
     // Set query results to state variable
     setQueryResults(results);
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
   }
 };

 const clearQueryResults = async function (): Promise<boolean> {
   setQueryResults(null);
   return true;
 };

 return (
   <>
     <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}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' GeoPoint Queries'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Result List'}</Title>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={result.get('name')}
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>{'Query buttons'}</Title>
         <PaperButton
           onPress={() => doQueryNear()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Near'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryWithinKilometers()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Within KM'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryWithinPolygon()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Within Polygon'}
         </PaperButton>
         <PaperButton
           onPress={() => clearQueryResults()}
           mode="contained"
           icon="delete"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Clear Results'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
});
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 Image,
 View,
 PermissionsAndroid,
 Platform,
 ScrollView,
 StyleSheet,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';
import Geolocation from 'react-native-geolocation-service';

export const QueryList: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);

 // This function asks for location permission on iOS and Android
 const requestLocationPermissions = async () => {
   if (Platform.OS === 'ios') {
     // iOS can be asked always, since the OS handles if user already gave permission
     await Geolocation.requestAuthorization('whenInUse');
   } else if (Platform.OS === 'android') {
     let permissionCheck: boolean = await PermissionsAndroid.check(
       PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
     );
     // Only asks for permission on Android if not given before
     if (permissionCheck !== true) {
       await PermissionsAndroid.request(
         PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
         {
           title: 'Location Permission Request',
           message:
             'This app needs you permission for using your location for querying GeoPoints in Parse!',
           buttonPositive: 'OK',
         },
       );
     }
   }
 };

 const doQueryNear = async function (): Promise<boolean> {
   // Request location permissions
   await requestLocationPermissions();
   // Get current location and create the GeoPoint for the query
   Geolocation.getCurrentPosition(
     async (currentPosition: {
       coords: {latitude: number; longitude: number};
     }) => {
       // Create our GeoPoint
       let currentLocationGeoPoint: Parse.GeoPoint = new Parse.GeoPoint(
         currentPosition.coords.latitude,
         currentPosition.coords.longitude,
       );

       // Create our query
       let parseQuery: Parse.Query = new Parse.Query('City');

       // `near` will order results based on distance between the GeoPoint type field from the class and the GeoPoint argument
       parseQuery.near('location', currentLocationGeoPoint);

       try {
         let results: [Parse.Object] = await parseQuery.find();
         // Set query results to state variable
         setQueryResults(results);
       } catch (error) {
         // Error can be caused by lack of Internet connection
         Alert.alert('Error!', error.message);
       }
     },
     _error => {
       Alert.alert(
         'Error!',
         'This app needs your location permission to query this!',
       );
     },
     {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
   );
   return true;
 };

 const doQueryWithinKilometers = async function (): Promise<boolean> {
   // Request location permissions
   await requestLocationPermissions();
   // Get current location and create the GeoPoint for the query
   Geolocation.getCurrentPosition(
     async (currentPosition: {
       coords: {latitude: number; longitude: number};
     }) => {
       // Create our GeoPoint
       let currentLocationGeoPoint: Parse.GeoPoint = new Parse.GeoPoint(
         currentPosition.coords.latitude,
         currentPosition.coords.longitude,
       );

       // Create our query
       let parseQuery: Parse.Query = new Parse.Query('City');

       // You can also use `withinMiles` and `withinRadians` the same way,
       // but with different measuring unities
       parseQuery.withinKilometers('location', currentLocationGeoPoint, 3000);

       try {
         let results: [Parse.Object] = await parseQuery.find();
         // Set query results to state variable
         setQueryResults(results);
       } catch (error) {
         // Error can be caused by lack of Internet connection
         Alert.alert('Error!', error.message);
       }
     },
     _error => {
       Alert.alert(
         'Error!',
         'This app needs your location permission to query this!',
       );
     },
     {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
   );
   return true;
 };

 const doQueryWithinPolygon = async function (): Promise<boolean> {
   // Create our GeoPoint polygon points
   let geoPoint1: Parse.GeoPoint = new Parse.GeoPoint(
15.822.238.344.514.300,00
-7.242.845.934.415.940,00
   );
   let geoPoint2: Parse.GeoPoint = new Parse.GeoPoint(
     -0.7433770196268968,
-9.744.765.968.406.660,00
   );
   let geoPoint3: Parse.GeoPoint = new Parse.GeoPoint(
-59.997.149.373.299.100,00
-7.652.969.196.322.740,00
   );
   let geoPoint4: Parse.GeoPoint = new Parse.GeoPoint(
-9.488.786.415.007.200,00
-18.346.101.586.021.900,00
   );
   let geoPoint5: Parse.GeoPoint = new Parse.GeoPoint(
15.414.859.532.811.000,00
-6.000.625.459.569.370,00
   );

   // Create our query
   let parseQuery: Parse.Query = new Parse.Query('City');

   // Note that the polygon is merely an array of GeoPoint objects and that the first and last are not connected, so Parse connects them for you
   parseQuery.withinPolygon('location', [
     geoPoint1,
     geoPoint2,
     geoPoint3,
     geoPoint4,
     geoPoint5,
   ]);

   try {
     let results: [Parse.Object] = await parseQuery.find();
     // Set query results to state variable
     setQueryResults(results);
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
   }
 };

 const clearQueryResults = async function (): Promise<boolean> {
   setQueryResults(null);
   return true;
 };

 return (
   <>
     <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}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' GeoPoint Queries'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Result List'}</Title>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={result.get('name')}
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>{'Query buttons'}</Title>
         <PaperButton
           onPress={() => doQueryNear()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Near'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryWithinKilometers()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Within KM'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryWithinPolygon()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Within Polygon'}
         </PaperButton>
         <PaperButton
           onPress={() => clearQueryResults()}
           mode="contained"
           icon="delete"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Clear Results'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
});
﻿
这是组件在渲染后以及查询其中一个查询函数时的样子:
﻿
结论
在本指南的最后，您了解了GeoPoint数据查询在Parse上的工作原理，以及如何在React Native应用程序中在Back4App上执行这些查询。在下一个指南中，您将查看如何在Parse中创建和管理用户。
更新日期 27 Jan 2025
此页面是否对您有帮助？
上一个
在 React Native 中使用 Parse 进行关系查询的技术实现
下一个
在Parse中实现关系型连接查询的技术指南
如何在React Native中使用Parse进行地理定位查询

使用 React Native 地理定位通过 Parse 执行地理查询

介绍

先决条件

目标

1 - 理解 Parse.Query 类

2 - 在 Back4App 上保存一些数据

3 - 查询数据

4 - 从 React Native 组件查询

结论
