React-native-google-places-autocomplete 在滚动视图中不起作用？ VirtualizedLists 不应该嵌套在普通的 ScrollViews 错误答案

【问题标题】：React-native-google-places-autocomplete does not work in a Scroll View? VirtualizedLists should never be nested inside plain ScrollViews ERRORReact-native-google-places-autocomplete 在滚动视图中不起作用？ VirtualizedLists 不应该嵌套在普通的 ScrollViews 错误
【发布时间】：2021-11-02 22:56:37
【问题描述】：

这个问题已经讨论过了，但我可以看到仍然没有可用的解决方案。我已阅读有关此事的所有文件。我得到的错误是：“VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中，因为它会破坏窗口和其他功能 - 请改用另一个 VirtualizedList-backed 容器”在插件的官方文档中，建议应用。但是，这并不能解决问题。如何在滚动视图中显示它？下面是我的代码谢谢

import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
export const GooglePlacesInput = () => {
  return (  
    <GooglePlacesAutocomplete
      placeholder='Search'
      onPress={(data, details = null) => {
        // 'details' is provided when fetchDetails = true
        console.log(data, details);
      }}
      query={{
        key: 'my Key',
        language: 'en',
      }}
    />
  );
};

我想在滚动视图中显示它

export const IznajmiScreen = () => ( 
  <>
  <IznajmiListContainer>
    <ScrollView keyboardShouldPersistTaps={'handled'} >
      <TextInput style={styles.input} placeholder="Naslov" /> 
      <MyDatePickerStart/>
      <MyDatePickerEnd/>
      <GooglePlacesInput/>
      </ScrollView>
  </IznajmiListContainer>
  </>
)

【问题讨论】：

标签： javascript react-native scrollview googleplacesautocomplete

【解决方案1】：

我找到了解决方案，但先不要添加这个，

import { LogBox } from 'react-native';

LogBox.ignoreLogs(['VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.']);

到您的代码。您只是关闭了您的应用程序，以免向您发出错误警告。

只需将“horizontal={true}”添加到像这样包装您的组件的任何 ScrollView。

<ScrollView
   horizontal={true}
   nestedScrollEnabled={true}
   keyboardShouldPersistTaps='handled'
   contentContainerStyle={{ flexGrow: 1 }}
>
   <GooglePlacesAutocomplete/>
</ScrollView>

来自尼日利亚的快乐编码:)。

【讨论】：