Question

react-native-google-places-autocomplete 为其指定一个值，而不仅仅是默认（初始）值

2017-05-04

13455

javascript reactjs react-native redux google-places-api

我有一个有效的 <TextInput> :

<TextInput
      placeholder="Location"
      value={props.locationInput.toString()}
      onChangeText={location => props.updateLocationInput(location)}
    />

props.locationInput 最初为 '' ，但应用程序启动后，几个异步函数就会触发并获取用户当前位置，这些位置会填充 props.locationInput（在 redux 存储中）。这意味着上面的 <TextInput> 会在用户到达时显示用户当前位置。我基本上只想按照上面的方法操作，但使用 react-native-google-places-autocomplete

react-native-google-places-autocomplete 确实使用 props.locationInput 值进行初始化。它有一个 getDefaultValue 属性，例如 getDefaultValue={() => props.locationInput.toString() ，但是当 props.locationInput 更改时它不会更改，因此它永远不会显示用户当前位置，因为初始化时未设置该位置。如何让 react-native-google-places-autocomplete 在 props.locationInput 更改时更新？

可能认为我可能需要在用户当前位置输入之前不渲染它，但这真的很混乱。

编辑：还考虑不使用插件，而是调用谷歌地点 API。

Answer 1

虽然迟到了，但有一个名为 setAddressText 的函数。

示例：

setLocation(text) {
  this.placesRef && this.placesRef.setAddressText(text)
}
...
<GooglePlacesAutocomplete
ref={ref => {this.placesRef = ref}}
...
/>

Answer 2

使用 React 函数式钩子

        <GooglePlacesAutocomplete
          ...
          ref={ref => {
            ref?.setAddressText('123 myDefault Street, mycity')
          }}
        />

Answer 3

在 GooglePlaceAutocomplete 组件上，您必须使用 onPress 事件来获取值。以下是示例：

<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
            this.setState(
              {
                address: data.description, // selected address
                coordinates: `${details.geometry.location.lat},${details.geometry.location.lng}` // selected coordinates
              }
            );
          }}
                textInputProps={{
                  onChangeText: (text) => { console.warn(text) }
                }}
                getDefaultValue={() => ''}

                query={{
                  // available options: https://developers.google.com/places/web-service/autocomplete
                  key: 'XXXXXXXXXXXXXXZXZXXXXXXX',
                  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.

              />