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

Question

我正在使用 react-native-google-places-autocomplete 来选择位置。我想提取所选位置并将其用作要传递给另一个函数的 Prop 。该值应为 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
                  }
                );
              }}