React-native-google-places-autocomplete在ScrollView中报VirtualizedLists嵌套错误如何解决

问题原因 #

报错是因为GooglePlacesAutocomplete组件的下拉搜索结果内部默认用了VirtualizedList实现，和外层同方向的普通ScrollView嵌套后触发了React Native的嵌套滚动限制，官方建议的keyboardShouldPersistTaps只解决点击响应问题，无法消除滚动嵌套冲突。

可行解决方案 #

方案1：禁用内部列表滚动（最常用，适配绝大多数场景） #

给GooglePlacesAutocomplete添加disableScroll属性，关闭内部列表的滚动能力，所有滚动逻辑交由外层ScrollView处理，直接消除冲突。
修改后的GooglePlacesInput组件代码如下：

import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
export const GooglePlacesInput = () => {
  return (  
    <GooglePlacesAutocomplete
      placeholder='Search'
      disableScroll={true} // 新增这行，关闭内部VirtualizedList滚动
      listViewProps={{
        keyboardShouldPersistTaps: 'handled' // 内部列表添加点击响应配置
      }}
      onPress={(data, details = null) => {
        console.log(data, details);
      }}
      query={{
        key: 'my Key',
        language: 'en',
      }}
    />
  );
};

原有外层的ScrollView代码无需额外修改，即可正常运行。

方案2：开启嵌套滚动支持 #

如果你需要保留GooglePlacesAutocomplete内部下拉列表的独立滚动能力，给外层ScrollView添加nestedScrollEnabled属性即可，React Native 0.68及以上版本全平台支持该属性：
修改后的外层页面代码如下：

export const IznajmiScreen = () => ( 
  <>
  <IznajmiListContainer>
    <ScrollView 
      keyboardShouldPersistTaps={'handled'} 
      nestedScrollEnabled={true} // 新增这行，开启同方向嵌套滚动支持
    >
      <TextInput style={styles.input} placeholder="Naslov" /> 
      <MyDatePickerStart/>
      <MyDatePickerEnd/>
      <GooglePlacesInput/>
      </ScrollView>
  </IznajmiListContainer>
  </>
)

两种方案任选其一即可消除报错，组件可正常运行。

内容的提问来源于stack exchange，提问作者Patrick89