Reactネイティブreact-native-google-places-autocompleteの実装

Question

react-native-google-places-autocompleteモジュールを実装しようとしていますが、次のコードビッドはリストビューで結果を生成しません。私はブレークポイントとコンソールログをパッケージに入れて、リクエストが成功しAPIが値を返すが、場所のどれもリストビューに入力されていないことが分かった。私は自分の問題点を示すためにスクリーンショットを添付しました。

- >

<GooglePlacesAutocomplete 
       placeholder='Search' 
       minLength={2} // minimum length of text to search 
       autoFocus={true} 
       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.log(data); 
        console.log(details); 
       }} 
       getDefaultValue={() => { 
        return ''; // text input default value 
       }} 
       query={{ 
        // available options: https://developers.google.com/places/web-service/autocomplete 
        key: 'AIzaSyCj2w25IckuLttTxl1MMhhQ0D8aG-tnSZc', 
        language: 'en', // language of the results 
        types: '(cities)', // default: 'geocode' 
       }} 
       styles={{ 
        description: { 
         fontWeight: 'bold', 
        }, 
        predefinedPlacesDescription: { 
         color: '#1faadb', 
        }, 
       }} 

       currentLocation={false} // 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

リストビューは、他のすべてのビューの後ろに隠れているようです。

styles={{ 
      description: { 
         fontWeight: 'bold', 
         }, 
      predefinedPlacesDescription: { 
          color: '#1faadb', 
         }, 
      listView: { color: 'black', //To see where exactly the list is 
         zIndex: 16, //To popover the component outwards 
         position: 'absolute', 
     }} 

Answer 2

このように使用します。私はこれがあなたのコードで動作するかもしれないと思います。

render() { 
     return (
      <View style={styles.searchBox}> 
       <GooglePlacesAutocomplete 
        placeholder='Where to Go' 
        minLength={2} // minimum length of text to search 
        autoFocus={false} 
        returnKeyType={'search'} 
        renderDescription={(row) => row.description} // custom description render 

        styles={searchInputStyle} 

       /> 

      </View> 
     ); 
    } 
} 

const searchInputStyle={ 
     container: { 
      backgroundColor: '#fff', 
      width: width, 
      marginLeft: 20, 
      marginRight: 20, 
      marginTop: 20, 
      marginBottom: 0, 
      opacity: 0.9, 
      borderRadius: 8 
     }, 
     description: { 
      fontWeight: 'bold', 
      color: "#007", 
      borderTopWidth: 0, 
      borderBottomWidth: 0, 
      opacity: 0.9, 
     }, 
     predefinedPlacesDescription: { 
      color: '#355', 
     }, 
     textInputContainer: { 
      height: 50, 

     }, 
      textInput: { 
      height: 33, 
      fontSize: 16 
     } 
    } 

const styles = StyleSheet.create({ 
    searchBox: { 
     top: 0, 
     position: "absolute", 
     flex: 1, 
     justifyContent: 'center', 
    } 
});