react-native-google-places-autocomplete 结果是白色的

Question

无法看到结果列表中的列表项。想了半天，还是没能解决这个问题。 当搜索结果出现时，我看不到文字。 listview 样式不会为文本着色。

        <GooglePlacesAutocomplete
          returnKeyType={'default'}
          fetchDetails={true}
          minLength={2}
          placeholder="Search"
          textInputProps={{
            placeholderTextColor: '#32a852',
            returnKeyType: 'search',
          }}
          onPress={(data, details = null) => {
            // 'details' is provided when fetchDetails = true
            console.log(data, details);
          }}
          query={{
            key: GOOGLE_API_KEY,
            language: 'en',
          }}
          styles={{
            textInput: {
              height: 38,
              color: '#5d5d5d',
              fontSize: 16,
            },
            predefinedPlacesDescription: {
              color: '#1faadb',
            },
            listView: {color: 'black', zIndex: 100000}, // doesnt work, text is still white?
          }}
        />
      </View>

Answer 1

在样式中，添加用于更改颜色或任何其他样式属性的描述。

styles = {{
...
description : {color : 'black'}
}}

Answer 2

suppressDefaultStyles={true} 并复制粘贴库中的默认样式到styles={{}}

这是我的完整代码

import React, { useRef, useEffect } from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { GOOGLE_MAPS_AUTOCOMPLETE_API_KEY } from '../../constants';
import { getReverseCodeLocation } from '../../api/locations';

navigator.geolocation = require('react-native-geolocation-service');

const AddressPicker = ({ onSelect, latitude, longitude }) => {
    const originRef = useRef();

    useEffect(() => {
        originRef.current?.setAddressText('Fetching location');
    }, []);

    useEffect(() => {
        handlePlaceSelect(latitude, longitude);
    }, [latitude !== 0 && longitude !== 0]);

    const handlePlaceSelect = async (latitude, longitude) => {
        try {
            if (latitude && longitude) {
                const response = await getReverseCodeLocation(latitude, longitude);
                if (response.ok) {
                    const locationData = await response.json();
                    const address = locationData.results[0].formatted_address;
                    originRef.current?.setAddressText(address);
                    onSelect(locationData.results[0]);
                } else {
                    originRef.current?.setAddressText('Error');
                }
            }
        } catch (error) {
            console.error("Error handling place selection:", error);
        }
    };

    return (
        <View>
            <ScrollView keyboardShouldPersistTaps="handled">
                <View keyboardShouldPersistTaps="handled">
                    <GooglePlacesAutocomplete
                        ref={originRef}
                        currentLocation={true}
                        placeholder='Enter your location'
                        minLength={2}
                        autoFocus={true}
                        returnKeyType={'search'}
                        keyboardAppearance={'light'}
                        listViewDisplayed='true'
                        fetchDetails={true}
                        enableHighAccuracyLocation={true}
                        onPress={(data, details = null) => {
                            if (data && details) {
                                onSelect(details);
                            }
                        }}
                        nearbyPlacesAPI='GoogleReverseGeocoding'
                        GooglePlacesSearchQuery={{
                            fields: "geometry",
                            rankby: 'distance',
                        }}
                        getDefaultValue={() => ''}
                        query={{
                            key: GOOGLE_MAPS_AUTOCOMPLETE_API_KEY,
                        }}
// -----default style from lib pasted in this
                        styles={{
                            container: {
                                flex: 1,
                            },
                            textInputContainer: {
                                flexDirection: 'row',
                            },
                            textInput: {
                                backgroundColor: '#FFFFFF',
                                height: 44,
                                borderRadius: 5,
                                paddingVertical: 5,
                                paddingHorizontal: 10,
                                fontSize: 15,
                                flex: 1,
                                marginBottom: 5,
                            },
                            row: {
                                backgroundColor: '#FFFFFF',
                                padding: 13,
                                minHeight: 44,
                                flexDirection: 'row',
                            },
                            separator: {
                                height: StyleSheet.hairlineWidth,
                                backgroundColor: '#c8c7cc',
                            },
                            poweredContainer: {
                                justifyContent: 'flex-end',
                                alignItems: 'center',
                                borderBottomRightRadius: 5,
                                borderBottomLeftRadius: 5,
                                borderColor: '#c8c7cc',
                                borderTopWidth: 0.5,
                            },
                        }}
                        suppressDefaultStyles={true} //<--- see this
                        textInputProps={{ onBlur: () => {} }}
                        GooglePlacesDetailsQuery={{ fields: ['geometry', 'formatted_address'] }}
                        debounce={300}
                    />
                </View>
            </ScrollView>
        </View>
    );
};

export default AddressPicker;