Expo/React Native中Slider内GooglePlacesAutocomplete选择失效问题

在Expo/React Native项目中，单独使用基于GooglePlacesAutocomplete实现的LocationAutocomplete组件功能正常，但将其嵌入Swiper（滑块）组件后，出现以下问题：

• 用户可正常唤起键盘输入地点
• 点击下拉建议项时，选中内容无法填入输入框，下拉容器直接关闭
• 临时解决方案keepListContainer={true}会导致用户体验混乱

可能原因 #

1. Swiper的触摸事件拦截：Swiper组件默认的触摸事件处理可能会拦截下拉建议列表的点击事件，导致GooglePlacesAutocomplete的onPress回调无法完整执行，或者触发输入框失焦，下拉列表提前关闭。
2. 组件重渲染导致状态丢失：选中地点后调用setBirthLocation更新状态，可能触发BirthLocationScreen重新渲染，进而导致GooglePlacesAutocomplete的输入框状态未同步更新。
3. KeyboardAwareScrollView的事件处理：keyboardShouldPersistTaps='handled'的设置可能影响点击事件向下拉列表的传递。

解决方案 #

方案1：阻止Swiper拦截下拉列表的触摸事件 #

修改LocationAutocomplete的列表样式，确保点击事件不被父组件拦截：

// LocationAutocomplete组件的styles修改
styles={{
  // ...其他样式
  listView: {
    width: '100%',
    alignSelf: 'center',
    pointerEvents: 'auto', // 强制列表项接收点击事件
    ...customStyles.listView,
  },
  ...customStyles,
}}

可选：临时禁用Swiper滑动功能，避免输入时误触切换页面。在滑块所在组件添加状态跟踪输入框激活状态：

const [isAutocompleteActive, setIsAutocompleteActive] = useState(false);

// 传递状态控制函数给BirthLocationScreen，再透传给LocationAutocomplete
// LocationAutocomplete中修改textInputProps：
textInputProps={{
  placeholderTextColor: colors.whitePlaceholder,
  onFocus: () => props.onAutocompleteFocus(true),
  onBlur: () => props.onAutocompleteFocus(false),
}}

// 滑块组件中设置scrollEnabled
<Swiper
  loop={false}
  showsPagination={true}
  index={0}
  scrollEnabled={!isAutocompleteActive} // 输入激活时禁用滑动
  ref={swiperRef}
  activeDotColor="white"
  style={styles.swiper}
>
  {/* ...各屏幕组件 */}
</Swiper>

方案2：优化状态同步逻辑 #

修改LocationAutocomplete的状态同步逻辑，避免重复触发输入框文本更新：

// LocationAutocomplete中的useEffect修改
useEffect(() => {
  if (birthLocation?.input_address && autocompleteRef.current) {
    const currentText = autocompleteRef.current.getAddressText();
    // 仅当地址内容变化时更新输入框
    if (currentText !== birthLocation.input_address) {
      autocompleteRef.current.setAddressText(birthLocation.input_address);
    }
  }
}, [birthLocation?.input_address]);

方案3：调整键盘持久化设置 #

修改BirthLocationScreen中KeyboardAwareScrollView的键盘事件处理：

<KeyboardAwareScrollView style={styles.scrollView} keyboardShouldPersistTaps='always'>
  {/* ...页面内容 */}
</KeyboardAwareScrollView>

方案4：手动控制下拉列表显示 #

去掉临时的keepResultsAfterBlur设置，改为延迟关闭下拉列表，确保选中事件执行完成：

// LocationAutocomplete中添加状态
const [showResults, setShowResults] = useState(false);

// 修改GooglePlacesAutocomplete的props
<GooglePlacesAutocomplete
  // ...其他props
  keepResultsAfterBlur={showResults}
  onFocus={() => setShowResults(true)}
  onBlur={() => {
    // 延迟200ms关闭，保证onPress回调执行完成
    setTimeout(() => setShowResults(false), 200);
  }}
/>

验证修改 #

完成上述修改后，移除BirthLocationScreen中LocationAutocomplete的keepListContainer={true}设置，测试以下场景：

1. 唤起输入框，输入内容后正常显示下拉建议
2. 点击建议项，确认内容填入输入框，下拉列表自动关闭
3. 点击输入框外部，下拉列表正常关闭

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