css - 世博会谷歌地方自动完成 - listView 不 clicable

Question

我正在尝试使用 GooglePlacesAutocomplete，但是一旦我进行地址查询，例如：“São C”和“listView”返回类似：“São Caetano，São Paulo ...”，但是当我尝试选择一个时选项似乎列表不可见，因为选择不会影响项目列表。

这是我正在使用的代码：

import * as React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { colors, device, fonts } from '../constants';

// icons
import SvgTruck from './icons/Svg.Truck';

//const { onLocationSelected } = this.props

// constants
const GOOGLE_MAPS_APIKEY = '[API KEY]'

const WhereTo = () => (
  <View style={styles.container}>
    <View style={styles.containerBanner}>
      <Text style={styles.bannerText}>15% off, up to $6.00</Text>
      <Text style={styles.bannerMuted}>3 days</Text>
    </View>
    <View style={styles.containerInput} >
      <View style={styles.containerSquare}>
        <View style={styles.square} />
      </View>
      <GooglePlacesAutocomplete
        styles={{
          textInputContainer: {
            flex: 1,
            backgroundColor: 'transparent',
            height: 54,
            marginHorizontal: 20,
            borderTopWidth: 0,
            borderBottomWidth:0
          },
          textInput: {
            height: 45,
            left:0,
            margin: 0,
            borderRadius: 0,
            paddingTop: 0,
            paddingBottom: 0,
            paddingLeft: 0,
            paddingRight: 0,
            padding: 0,
            marginTop: 0,
            marginLeft: 0,
            marginRight: 0,
            fontSize:18
          },
          listView: {
            position:'absolute',
            marginTop: 50
          },
          description: {
            fontSize:16
          },
          row: {
            padding: 18,
            height:58
          }
        }}
        placeholder="Para onde?"
        onPress={(data, details) => {
          // 'details' is provided when fetchDetails = true
          console.log(data, details);
      }}
        query={{
          key: GOOGLE_MAPS_APIKEY,
          language: 'pt',
          components: "country:br"
        }}
        textInputProps={{
          autoCapitalize: "none",
          autoCorrect: false
        }}
        fetchDetails
        enablePoweredByContainer={false}
      />
      <View style={styles.containerIcon}>
        <SvgTruck />
      </View>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    top: Platform.select({ ios: 60, android: 40 }),
    alignSelf: 'center',
    position: 'absolute',
    shadowColor: colors.black,
    shadowOffset: { height: 2, width: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    top: device.iPhoneX ? 144 : 120,
    width: device.width - 40
  },
  containerBanner: {
    backgroundColor: colors.green,
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 8
  },
  bannerText: {
    color: colors.white,
    fontFamily: fonts.uberMedium,
    fontSize: 12
  },
  bannerMuted: {
    color: colors.mint,
    fontFamily: fonts.uberMedium,
    fontSize: 12
  },
  containerInput: {
    alignItems: 'center',
    backgroundColor: colors.white,
    flexDirection: 'row',
    height: 48
  },
  containerSquare: {
    alignItems: 'center',
    flex: 0.15
  },
  square: {
    backgroundColor: colors.black,
    height: 8,
    width: 8
  },
  containerIcon: {
    alignItems: 'center',
    borderLeftColor: colors.greyMercury,
    borderLeftWidth: 1,
    flex: 0.2
  }
});

export default WhereTo;

任何人都可以帮助我解决它吗？

标签： cssreact-nativeexpogoogleplacesautocomplete

Answer 1

我重新创建了 Expo 项目，现在它可以工作了，我找不到根本原因，但是一旦另一个项目是由其他人制作的，并且 Expo 使其易于执行和配置，创建起来很快。

export default function AskForDriver () {
  const [location, setLocation] = useState("");
  const [errorMsg, setErrorMsg] = useState("");

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  let text = 'Waiting..';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);

    console.log('location - latitude: ', location.coords.latitude)
    console.log('location - longitude: ', location.coords.longitude)
  }

    return (
      <View style={styles.container}>
        <View style={styles.mainHeader}>
          <Text style={styles.fontHeader}>Incluir flatlist com promoções e mensagens de incentivos</Text>
        </View>
        <View style={styles.searchHeader}>
          <GooglePlacesAutocomplete
            currentLocation
            //styles={styles.placesautocomplete}
            styles={{
              textInputContainer: {
                backgroundColor: 'grey',
              },
              placesautocomplete: {
                flex:1,
              },
              textInput: {
                height: 38,
                color: '#5d5d5d',
                fontSize: 16,
              },
              predefinedPlacesDescription: {
                color: '#1faadb',
              },
            }}
            placeholder='Search'
            onPress={(data, details = null) => {
              // 'details' is provided when fetchDetails = true
              console.log(data, details);
            }}
            
            query={{
              key: 'YOUR API KEY',
              language: 'pt',
              components: 'country:br',
            }}
          />
        
        </View>
        
        <MapView
          style={styles.mapStyle}
          showsMyLocationButton
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
        </MapView>     
        
        {//<Text>{text}</Text>
        }
        
      </View>
    );
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      position: 'absolute',
      alignContent:'center',
      margin:0
    },
    mainHeader: {
      backgroundColor: '#10002b',
      padding:10,
    },
    fontHeader: {
      color: '#e0aaff',
      fontSize: 15,
      
    },
    searchHeader: {
      borderColor: '#333',
      borderWidth:5,
    },
    mapStyle: {
      flex:1,
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
    },
    
  });