关于
App & Flow是一个基于蒙特利尔的React Introduction工程和咨询工作室. 我们与世界顶尖公司合作,并被推荐 博览需要帮忙吗? 让我们一起建设. 团队@appandflow.com
安装
yarn add @appandflow/react-native-google-autocomplete
npm i @appandflow/react-native-google-autocomplete
使用量
这个 useGoogleAutocomplete 钩子需要两个参数
| 参数 | 说明 |
|---|---|
| 键 | 您的谷歌放置了 api 键 |
| 配置 | 可选配置对象 |
配置对象
| 财产 | 说明 |
|---|---|
| 弹跳 | 可选 - 默认 300 |
| 退出选项 | 选项 - 解开行为的配置选项. |
| 语言 | 选项 - 默认“ en” |
| 查询类型 | 选项 - 默认地址 - https://developers.google.com/places/web-service/autocomplete#place types (中文(简体) ) |
| 分钟 | 选项 - 默认 2 - 这是开始前术语搜索的分钟长度 |
| 组件 | 选项 - 一组您想要限制您结果的地方 |
| 半径 | 可选 - 返回地点结果的距离(米) |
| 号 | 可选 - 纬度。 如果提供,则需要印章 |
| 猪 | 可选 - 经度。 如果提供,则需要拉特 |
| 严格边界 | 可选 -- -- 返回地点仅限于按地点和半径界定的区域. |
| 来源 | 选项 - 源点为 {lat, Ing } 从该点计算到目的地的直线距离( 返回为距离 公尺) |
| 代理用户 | 选项 - 如果您想要在基于 Web 的平台上使用钩子,则需要此选项 。 由于我们不使用Google SDK,除非提供代理Url,否则http调用将因与CORS有关的问题而失败 |
| 页眉 | 可选 - 自定义标题包含在 Google Places API 请求中。 用于通过特定平台的 API 限制, 如 X-Android-Package, (中文(简体) ), X-Android-Cert,或 X-Ios-Bundle-Identifier。 。 。 . |
已曝光属性
| 财产 | 说明 |
|---|---|
| 清除搜索 | 清除当前搜索 |
| 轮廓 | 布尔,让你知道搜索正在进行 |
| 地点 | 搜索结果阵列 |
| 搜索细节 | 函数可以让您获得更多细节, 有利于您选择结果 |
| 搜索错误 | 搜索过程中可能发生的错误 |
| 术语/设置 | 这个术语是使用的搜索术语,它使用 setTerm |
代码示例
这是一个最小函数片段, 它返回 3 个结果用于您的搜索 . 点击结果记录结果的细节.
const { locationResults, setTerm, clearSearch, searchDetails, term } =
useGoogleAutocomplete(API_KEY, {
language: 'en',
debounce: 300,
});
return (
<View>
<TextInput
value={term}
onChangeText={setTerm}
/>
{locationResults.slice(0, 3).map((el, i) => (
<TouchableOpacity
key={String(i)}
onPress={async () => {
const details = await searchDetails(el.place_id);
console.log(JSON.stringify(details, null, 2));
}}
>
<Text>{el.structured_formatting.main_text}</Text>
</TouchableOpacity>
))}
</View>
);
结果
locationResults 返回以下内容。 Google设定的最大结果是5个通过查询的位置.
export interface GoogleLocationResult {
description: string;
id: string;
matched_substrings: Array<{
length: number;
offset: number;
}>;
place_id: string;
reference: string;
structured_formatting: {
main_text: string;
secondary_text: string;
main_text_matched_substrings: Array<{
length: number;
}>;
};
terms: Array<{
offset: number;
value: string;
}>;
types: string[];
distance_meters?: number; // Present when origin parameter is provided
}
当呼叫搜索时,详情如下:
export interface GoogleLocationDetailResult {
adr_address: string;
formatted_address: string;
icon: string;
id: string;
name: string;
place_id: string;
scope: string;
reference: string;
url: string;
utc_offset: number;
vicinity: string;
types: string[];
geometry: {
location: {
lat: number;
lng: number;
};
viewport: {
[type: string]: {
lat: number;
lng: number;
};
};
};
address_components: Array<{
long_name: string;
short_name: string;
types: string[];
}>;
}
键入
如果您需要流量或打字符, 可以导入两种结果键入 .
import {
GoogleLocationDetailResult,
GoogleLocationResult,
} from 'react-native-google-autocomplete';
自定义信头
您可以将自定义信头传递给 Google Places API 请求。 这对 应用限制 例如Android应用或iOS捆绑限制.
// Android
const { locationResults, setTerm } = useGoogleAutocomplete(API_KEY, {
headers: {
'X-Android-Package': 'com.example.app',
'X-Android-Cert': 'your-signing-certificate-fingerprint',
},
});
// iOS
const { locationResults, setTerm } = useGoogleAutocomplete(API_KEY, {
headers: {
'X-Ios-Bundle-Identifier': 'com.example.app',
},
});
国家限制
如果您想要限制国家搜索, 您可以将此添加为道具 components="country:ca"这里仅举加拿大为例.