反应母语 - 谷歌 - 地方 - 自动完成赋予它的值，而不仅仅是默认（初始）值

Question

我有一个工作<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更改时它不会更改，因此它不会显示用户当前位置，因为它在初始化时未设置。 props.locationInput更改时如何更新react-native-google-places-autocomplete？

可能认为我可能需要不渲染它，直到用户当前的位置进来，但这真的很混乱。

编辑：也看着不使用插件，而是调用谷歌地方的API。

Answer 1

在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. 

       />