Question

我正在使用 react-native-google-places-autocomplete 来选择一个位置。我想提取所选的位置并将其用作道具传递给另一个函数。该值应为String类型。我不知道如何提取所选的描述值。以下是我到目前为止的情况：

<GooglePlacesAutocomplete
                    placeholder='Event Location'
                    minLength={2} // minimum length of text to search
                    autoFocus={false}
                    // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
                    listViewDisplayed='auto'    // true/false/undefined
                    fetchDetails={true}
                    renderDescription={row => row.description} // custom description render
                    onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                      //console.warn(data, details);
                       props.location = data.description;
                    }}
                    textInputProps={{
                      onChangeText: (text) => { console.warn(text) }
                    }}
                    getDefaultValue={() => ''}

                    query={{
                      // available options: https://developers.google.com/places/web-service/autocomplete
                      key: 'AIzaSyCKwbZNUyUIx2X0XBBlWbhPu_unz5_1o3E',
                      language: 'en', // language of the results
                      types: 'geocode' // default: 'geocode'
                    }}

                    styles={{
                      textInputContainer: {
                        backgroundColor: 'rgba(0,0,0,0)',
                        borderTopWidth: 0,
                        borderBottomWidth:0,
                      },
                      description: {
                        fontWeight: 'bold',
                      },
                      textInput: {
                      marginLeft: 22,
                      marginRight: 0,
                      height: 38,
                      color: '#5d5d5d',
                      fontSize: 16,
                    },
                      predefinedPlacesDescription: {
                        color: '#1faadb'
                      }
                    }}
                    value={props.location}
                    onChangeText={props.onLocationChange}
                    renderLeftButton={()  => <Text style={{ marginTop: 12, marginLeft:16, fontSize: 18 }}> Location </Text>}
                    nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
                    GoogleReverseGeocodingQuery={{
                      // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
                    }}
                    GooglePlacesSearchQuery={{
                      // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
                      rankby: 'distance',
                      types: 'food'
                    }}

                    filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
                    debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.

                  />

Answer 1

您将在组件的onPress回调中获得所选位置。

   onPress={(data, details = null) => {
                // 'details' is provided when fetchDetails = true
                this.setState(
                  {
                    address: data.description, // selected address
                    coordinates: `${details.geometry.location.lat},${details.geometry.location.lng}` // selected coordinates
                  }
                );
              }}

Answer 2

这为您提供了经度和纬度：

onPress = {(data, details = null) => {
  const { lat, lng } = details.geometry.location;
)}}

如何使用react-native-google-places-autocomplete获取所选值？

2 个答案: