在 React Native 中使用 Google Places 自动完成组件

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { useDispatch } from 'react-redux';
import { useTranslation } from 'react-i18next';
 
const PlaceAutocomplete = () => {
  const dispatch = useDispatch();
  const { t } = useTranslation();
 
  const handlePlaceSelected = (address) => {
    dispatch({ type: 'UPDATE_SELECTED_ADDRESS', payload: address });
  };
 
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
 
  return (
    <View style={styles.container}>
      <GooglePlacesAutocomplete
        placeholder={t('searchPlaceholder')}
        minLength={2} // minimum length of text to search
        autoFocus={false}
        returnKeyType={'search'} // Can be left out for default return key to simulate 'search' action
        listViewDisplayed={false} // true/false to toggle the display of list view on focus
        fetchDetails={true}
        renderDescription={(row) => row.description} // custom description render
        onPress={(data, details = null) => {
          // 'details' is provided when fetchDetails = true
          handlePlaceSelected(details);
        }}
        getDefaultValue={() => ''}
        query={{
          key: 'YOUR_GOOGLE_MAPS_API_KEY',
          language: 'en', // language of the results
        }}
        styles={{
          textInputContainer: {
            backgroundColor: 'rgba(0,0,0,0.5)', // background color of the text input
            borderTopWidth: 0, // top border width (hides the line under the autocomplete)
            borderBottomWidth: 0, // bottom border width
          },
          textInput: {
            marginLeft: 0, // margin start position
            marginRight: 0, // margin end position
            height: 38, // input height
            color: '#white', // input text color
          },
          listView: {
            backgroundColor: '#fff', // background color of the list view
          },
        }}
        nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
        GoogleReverseGeocodingQuery={{}}