React Native react-native-google-places-autocomplete实现 [英] React Native react-native-google-places-autocomplete implementation

问题描述

我正在尝试实现react-native-google-places-autocomplete模块，但是以下代码位在列表视图中不会产生任何结果.我在包中放置了断点和控制台日志，发现请求成功并且API返回了值，但是列表视图中没有填充任何地方.我还附上了屏幕截图，以显示我的问题所在.

I am trying to implement the react-native-google-places-autocomplete module, but the following codebit does not produce any results in the list view. I put breakpoints and console logs within the package and found that the request is successful and the API is returning values, but none of the places are being populated in a list view. I have also attached screen shots to show what my issue is.

->

<GooglePlacesAutocomplete
                placeholder='Search'
                minLength={2} // minimum length of text to search
                autoFocus={true}
                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);
                    console.log(details);
                }}
                getDefaultValue={() => {
                    return ''; // text input default value
                }}
                query={{
                    // available options: https://developers.google.com/places/web-service/autocomplete
                    key: 'AIzaSyCj2w25IckuLttTxl1MMhhQ0D8aG-tnSZc',
                    language: 'en', // language of the results
                    types: '(cities)', // default: 'geocode'
                }}
                styles={{
                    description: {
                        fontWeight: 'bold',
                    },
                    predefinedPlacesDescription: {
                        color: '#1faadb',
                    },
                }}

                currentLocation={false} // 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} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
            />

推荐答案

使用这种方式.我想这可能与您的代码一起使用.

use this way. I guess this might work with your code.

   render() {
        return (
            <View style={styles.searchBox}>
                <GooglePlacesAutocomplete
                    placeholder='Where to Go'
                    minLength={2} // minimum length of text to search
                    autoFocus={false}
                    returnKeyType={'search'} 
                    renderDescription={(row) => row.description} // custom description render

                    styles={searchInputStyle}

                />

            </View>
        );
    }
}

const searchInputStyle={
        container: {
            backgroundColor: '#fff',
            width: width,
            marginLeft: 20,
            marginRight: 20,
            marginTop: 20,
            marginBottom: 0,
            opacity: 0.9,
            borderRadius: 8
        },
        description: {
            fontWeight: 'bold',
            color: "#007",
            borderTopWidth: 0,
            borderBottomWidth: 0,
            opacity: 0.9,
        },
        predefinedPlacesDescription: {
            color: '#355',
        },
        textInputContainer: {
            height: 50,

        },
            textInput: {
            height: 33,
            fontSize: 16
        }
    }

const styles = StyleSheet.create({
    searchBox: {
        top: 0,
        position: "absolute",
        flex: 1,
        justifyContent: 'center',
    }
 });

这篇关于React Native react-native-google-places-autocomplete实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！