Question

我正在开发一个使用react-native-google-places-autocomplete的react本机应用程序。我要自定义其列表视图，以便它应该像模型一样出现在所有其他组件上。当前，当我们搜索位置时，列表视图位于其他组件下方。如何使它成为下面所有其他组件之上的代码。

      <GooglePlacesAutocomplete
       placeholder='Search'
      minLength={2} // minimum length of text to search
      autoFocus={false}
      returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
      listViewDisplayed='false'    // true/false/undefined
      fetchDetails={true}
      renderDescription={row => row.description} // custom description render
      onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
      console.log(data, details);
      this.setState({latitutde:details.geometry.location.lat})
      this.setState({longitude:details.geometry.location.lng})
        }}

      getDefaultValue={() => ''}

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

        styles={{

        listView: {
        backgroundColor: 'white',
        borderRadius: 5,
        flex: 1,
        elevation: 3,
        zIndex: 10
                },
        textInputContainer: {
        borderTopWidth: 0,
        borderBottomWidth:0,
        width: '90%',
        backgroundColor: 'transparent',
                            },

          }}

          //currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
          //currentLocationLabel="Current location"
          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
           //predefinedPlaces={[homePlace, workPlace]}

           debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
           />

Answer 1

当我处理此类问题时，我发现的唯一解决方案是将代码包装在容器中，并根据需要增加容器的高度，然后将容器的背景色设置为透明。另一个解决方案是有条件地将主容器的高度设置为等于列表视图的高度。

Google地方信息自动完成React本机自定义视图

1 个答案: