Question

 <View style={{
           flex: 1,
        paddingTop:100
         }}>


   <Text>asfhjdshfdsbfbusdufn</Text>
   <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
      keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
      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, details);
      }}

      getDefaultValue={() => ''}

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

      styles={{
        textInputContainer: {
          width: '100%'
        },

        description: {
          fontWeight: 'bold'
        },
        predefinedPlacesDescription: {
          color: '#1faadb'
        }
      }}

      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',
        type: 'cafe'
      }}

      GooglePlacesDetailsQuery={{
        // available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
        fields: 'formatted_address',
      }}

      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.
    //  renderLeftButton={()  => <Image source={require('path/custom/left-icon')} />}
      renderRightButton={() => <Text>Custom text after the input</Text>}
    />
       </View>

   </MapView>

the image link

我正在尝试将Google自动填充视图添加到我的React Native应用程序中，但在我试图使该组件位于顶部并试图在其顶部填充到容器视图的过程中碰到了，但我不成功，但是文本组件可以很好地进行对齐，而自动完成功能不符合我的行为

Answer 1

您可以使用SafeAreaView。正式文件为here

Answer 2

您尝试将样式更改为绝对样式吗？

例如：

styles={{
        ...
        container: {
           position: 'absolute',
           top: 100,
           left: 10,
           right: 10,
           width: Dimensions.get('window').width - 20,
           height: 50
        }
        ...
      }}

无法对齐自动完成视图

2 个答案: