React native 自动完成不会显示在React native中<；视图>；

为什么这不显示在flexbox的视图中？它只是不可见，使我的工作看起来好像我没有做正确的事情-事实上，我没有做正确的事情，我真的需要帮助。 地图上显示的是fine，但不是GoogleplacesAutocomplete输入框

为什么会这样？下面是我的Package.json文件

{
  "name": "XXXXXXXXXXXXXXXXXXXXXXXX",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-google-places-autocomplete": "^2.2.0",
    "react-native-maps": "^0.28.0",
    "react-native-maps-directions": "^1.8.0"
  },
  "devDependencies": {
    "@babel/core": "7.14.0",
    "@babel/runtime": "7.14.0",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

现在这里讨论的代码就是代码

import React , {useState} from 'react';
import {StyleSheet, View, Dimensions, Text} from 'react-native';
import MapView , { Marker , Polyline } from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const MyDistance =() =>{

    const [coordinates] = useState([
        {
          latitude: 6.450430,
          longitude: 3.390460,
        },
        {
          latitude: 6.430980,
          longitude: 3.435880,
        },
      ]);

    return (
        <View style={styles.container}>
            <View style={styles.inputContainer}>
            <GooglePlacesAutocomplete
                placeholder='Origin'
                onPress={(data, details = null) => {
                  // 'details' is provided when fetchDetails = true
                  console.log(data, details);
                }}
                query={{
                  key: 'AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9-YNE',
                  language: 'en',
                }}
                styles={{
                  container:{flex : 0, position:'absolute', width: '100%', zIndex: 1},
                  listView:{backgroundColor : 'white'}
                }}
              />

        <GooglePlacesAutocomplete
                        placeholder='Destination'
                        onPress={(data, details = null) => {
                        // 'details' is provided when fetchDetails = true
                        console.log(data, details);
                        }}
                        query={{
                        key: 'AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9-YNE',
                        language: 'en',
                        }}
                        styles={{
                        container:{flex : 0, position:'absolute', width: '100%', zIndex: 1},
                        listView:{backgroundColor : 'white'}
                        }}
                    />
            </View>
            <View style={styles.MapContainer}>
            <MapView
          style={styles.maps}
          initialRegion={{
            latitude: coordinates[0].latitude,
            longitude: coordinates[0].longitude,
            latitudeDelta: 0.0622,
            longitudeDelta: 0.0121,
          }}>
          <MapViewDirections
            origin={coordinates[0]}
            destination={coordinates[1]}
            apikey="AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9-YNE"
            strokeWidth={4}
            strokeColor="#FD0631"
          />
          <Marker coordinate={coordinates[0]} />
          <Marker coordinate={coordinates[1]} />
        </MapView>
            </View>
        </View>
    );
}

const styles = StyleSheet.create ({
    container:{
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    },
    inputContainer:{
        width: 1100,
        height: 200,
        //backgroundColor: '#b3c6ff'
    },

    MapContainer:{
        width: 3000,
        height: 900,
    },
    maps: {
        width: 3000,
        height: 900,
      },

});


export default MyDistance;

import React，{useState}来自“React”；
从“react native”导入{样式表、视图、维度、文本}；
从“react native maps”导入MapView，{Marker，Polyline}；
从“react native maps directions”导入MapViewDirections；
从“react native google places autocomplete”导入{GooglePlacesSautoComplete}；
常量MyDistance=（）=>{
常数[坐标]=使用状态([
{
纬度：6.450430，
经度：3.390460，
},
{
纬度：6.430980，
经度：3.435880，
},
]);
返回(
{
//当fetchDetails=true时提供“details”
控制台日志（数据、详细信息）；
}}
质疑={{
关键字：“AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9 YNE”，
语言:"en",，
}}
风格={{
容器：{flex:0，位置：'absolute'，宽度：'100%，zIndex:1}，
listView:{backgroundColor:'white'}
}}
/>
{
//当fetchDetails=true时提供“details”
控制台日志（数据、详细信息）；
}}
质疑={{
关键字：“AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9 YNE”，
语言:"en",，
}}
风格={{
容器：{flex:0，位置：'absolute'，宽度：'100%，zIndex:1}，
listView:{backgroundColor:'white'}
}}
/>
);
}
const styles=StyleSheet.create({
容器：{
flexDirection:'列'，
为内容辩护：“中心”，
对齐项目：“居中”，
},
输入容器：{
宽度：1100，
身高：200，
//背景颜色：“#b3c6ff”
},
映射容器：{
宽度：3000，
身高：900，
},
地图：{
宽度：3000，
身高：900，
},
});
导出默认MyDistance；

现在当我想让它显示时，只是地图显示，另一个输入“起点”和“终点”的没有显示，为什么会这样？请参见下图：

请协助