react-native-google-places-autocomplete 在用视图包装时不起作用

问题描述

我对 react-native 还很陌生，现在正面临这个问题：

google-places-autocomplete 在将其包装在视图中时不起作用（向下滚动不显示），当我删除它时它起作用..

控制台日志不显示任何内容，其他 android 模拟器。

帮助某人1 ？还是谢谢:)

import React,{useState} from 'react';
import FormCity from '../components/FormCity';
import {View,Text} from 'react-native';

const addFlightScreen = () => {

    const [destination,setDest] = useState("");

  return (
      <View>
          <FormCity onDest={setDest}/>
          <Text>Hello</Text> 
      </View>
  );
};

export default addFlightScreen;

和

import React from 'react'; import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const FormCity = ({onDest}) => {

  return (
        <GooglePlacesAutocomplete
            placeholder='Enter Country,City (your destination)'
            minLength={2}
            autoFocus={false}
            returnKeyType={'default'}
            keyboardAppearance={'light'}
            listViewdisplayed='auto'
            fetchDetails={true}
            renderDescription={row => row.description}
            onPress={(data,details = null) => {
                onDest(data.description);
                console.log(data.description);
            }}
            getDefaultValue={ () => ''}
            query={{
                key: 'API_KEY',language: 'en',types: '(cities)'
            }}
            styles={{
                textInputContainer: {
                    width: '100%'
                },description: {
                    fontWeight: 'bold'
                },predefinedplacesDescription: {
                    color: '#1faadb'
                }

            }}
            
    />   ); };

export default FormCity;

解决方法

这取决于您的用例。但是我遇到了这个问题，我的解决方案是将 Places 组件放在页面的主视图中（flex:1 OR full height width）作为它的最后一个子元素并使其位置绝对。因为当你输入搜索时，它的高度需要动态增加。尝试为您的父视图提供样式。

在您的父视图中添加 flexGrow: 1

return (
  <View style={{ flexGrow: 1 }}>
      <FormCity onDest={setDest}/>
      <Text>Hello</Text> 
  </View>
);

googleplacesautocomplete react-native