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

【问题标题】：react-native-google-places-autocomplete not working when wrapping it with viewreact-native-google-places-autocomplete 在用视图包装时不起作用
【发布时间】：2021-01-02 22:31:34
【问题描述】：

我对 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;

【问题讨论】：

标签： react-native googleplacesautocomplete

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：