Ben*_*ins 5 javascript google-places-api reactjs react-native redux
我有工作<TextInput>:
<TextInput
placeholder="Location"
value={props.locationInput.toString()}
onChangeText={location => props.updateLocationInput(location)}
/>
Run Code Online (Sandbox Code Playgroud)
在props.locationInput最初''但一旦应用程序启动时,一对夫妇异步功能火,并获得用户的当前位置,其填充props.locationInput(在终极版商店)。这意味着<TextInput>上面会在到达时向用户显示当前位置。我基本上想完全按照上面的方法做,但是要有react-native-google-places-autocomplete
该react-native-google-places-autocomplete做的initialise与props.locationInput值。它具有一个getDefaultValue属性,例如getDefaultValue={() => props.locationInput.toString()},但是在props.locationInput更改时它不会更改,因此它从不会显示用户当前位置,因为在初始化时不会设置该位置。更改react-native-google-places-autocomplete时如何获取更新props.locationInput?
可能以为我可能不需要在用户当前位置进入时才渲染它,但这确实很麻烦。
编辑:还考虑不使用插件,而是调用Google Places API。
小智 5
游戏晚了,但有一个名为setAddressText 的函数。
例子:
setLocation(text) {
this.placesRef && this.placesRef.setAddressText(text)
}
...
<GooglePlacesAutocomplete
ref={ref => {this.placesRef = ref}}
...
/>
Run Code Online (Sandbox Code Playgroud)
在 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.
/>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2071 次 |
| 最近记录: |