Android react原生google places autocomplete npm软件包在应用程序中跟踪整个页面

我正在开发一个react原生应用程序。在这方面，我使用的是react原生google places autocomplete NPM包。很好用。我的问题是它是采取完整的页面查看。如何解决这个问题。我想要这样的输出

这是我的密码

从“React”导入React；
从“expo”导入{Constants}；
从“react native”导入{View，TextInput，Text，Alert}；
进口{
GooglePlacesAutocomplete，
}来自“react native google places autocomplete”；//1.2.12
让数据；
让我们了解细节；
康斯特家乡={
描述：'家'，
几何：{位置：{lat:48.8152937，lng:2.4597668}，
};
常数工作场所={
描述：“工作”，
几何：{位置：{lat:48.8496818，lng:2.2940881}}，
};
导出默认类OutletCreator扩展React.Component{
render（）{
返回(
row.description}//自定义描述呈现
onPress={（数据，详细信息=null）=>{
//当fetchDetails=true时提供“details”
数据=数据；
警报（“lat:+JSON.stringify（details.geometry.location.lat）+”lan:+JSON.stringify（details.geometry.location.lng））
控制台日志（数据）；
控制台日志（详细信息）；
}}
getDefaultValue={（）=>{
返回“”；//文本输入默认值
}}
质疑={{
//可用选项：https://developers.google.com/places/web-service/autocomplete
键：“XXXXXXXXX”，
语言：“en”，//结果的语言
类型：‘（城市）’，//默认值：“地理代码”
}}
风格={{
位置自动完成样式：{
容器：{
zIndex:10，
溢出：“可见”，
身高：50，
flexGrow:0，
flexShrink:0
},
说明：{
fontWeight:'粗体'，
},
预定义位置说明：{
颜色：“#1faadb”，
},
文本输入：{
背景色：“透明”，
尺寸：15，
线宽：22.5，
填充底部：0，
弹性：1
},
列表视图：{
位置：'绝对'，
排名：60，
左:10,，
右:10,，
背景颜色：“白色”，
边界半径：5，
弹性：1，
标高：3，
zIndex:10
},
}
}}
//currentLocation={true}//将在预定义位置列表的顶部添加一个“Current location”按钮
currentLocationLabel=“当前位置”
nearbyPlacesAPI=“GooglePlacesSearch”//使用哪种API：GoogleReverseGeoCode或GooglePlacesSearch
谷歌反向分类查询={{
//谷歌反向编码API的可用选项：https://developers.google.com/maps/documentation/geocoding/intro
}}
GooglePlacesSearchQuery={{
//Google PlacesSearch API的可用选项：https://developers.google.com/places/web-service/search
兰比：“距离”，
类型：“食物”，
}}
filterReverseGeocodingByTypes={[
"地方",，
“行政区三级”，
]}//如果只想显示城市，请按类型-['Location'、'administrative\u area\u level\u 3']过滤反向地理编码结果
预定义地点={[homePlace，workPlace]}
去盎司={200}
/>
一些文本
);
}
}

此处存在相同问题此处存在相同问题

        import React from 'react';
    import { Constants } from 'expo';
    import { View, TextInput,Text,Alert } from 'react-native';
    import {
      GooglePlacesAutocomplete,
    } from 'react-native-google-places-autocomplete'; // 1.2.12
    let datas;
    let details;
    const homePlace = {
      description: 'Home',
      geometry: { location: { lat: 48.8152937, lng: 2.4597668 } },
    };
    const workPlace = {
      description: 'Work',
      geometry: { location: { lat: 48.8496818, lng: 2.2940881 } },
    };

    export default class OutletCreator extends React.Component {
      render() {
        return (

          <View style={{ paddingTop: Constants.statusBarHeight, flex: 1 }}>
            <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
                datas=data;
                alert("lat: "+JSON.stringify(details.geometry.location.lat)+" lan: " +JSON.stringify(details.geometry.location.lng) )
                console.log(data);
                console.log(details);
              }}
              getDefaultValue={() => {
                return ''; // text input default value
              }}
              query={{
                // available options: https://developers.google.com/places/web-service/autocomplete
                key: 'xxxxxxxxxx',
                language: 'en', // language of the results
                types: '(cities)', // default: 'geocode'
              }}





              styles={{
                locationAutocompleteStyle: {
        container: {
          zIndex: 10,
          overflow: 'visible',
          height: 50,
          flexGrow: 0,
          flexShrink: 0
        },
                description: {
                  fontWeight: 'bold',
                },
                predefinedPlacesDescription: {
                  color: '#1faadb',
                },
                textInput: {
                backgroundColor: 'transparent',
                fontSize: 15,
                lineHeight: 22.5,
                paddingBottom: 0,
                flex: 1
              },
        listView: {
          position: 'absolute',
          top: 60,
          left: 10,
          right: 10,
          backgroundColor: 'white',
          borderRadius: 5,
          flex: 1,
          elevation: 3,
          zIndex: 10
        },
                }


              }}
              //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}
            />
          <TextInput>Some Text</TextInput>

          </View>
        );
      }
    }