GooglePlacesAutocomplete onPress事件无响应问题排查求助

可能的原因及对应修复方案 #

1. 环境变量引用错误 #

你在query.key中写了'process.env.PUBLIC_MY_KEY'，这是字符串字面量，并非实际读取环境变量的值。虽然当前能加载地址建议说明密钥有效，但这个写法存在风险，先修正为：

query={{
  key: process.env.PUBLIC_MY_KEY, // 移除引号，正确读取环境变量
  language: 'en',
}}

2. 父容器样式干扰下拉列表交互 #

父容器searchBarContainer设置的flexDirection: 'row'会破坏GooglePlacesAutocomplete的默认垂直布局，导致下拉建议列表无法接收点击事件。可以调整父容器样式：

const styles = StyleSheet.create({
  searchBarContainer: {
    paddingHorizontal: 30,
    marginTop: 15,
    backgroundColor: '#ffffff',
    elevation: 5,
    borderRadius: 20,
    width: '70%',
    alignSelf: 'center',
    // 移除flexDirection: 'row'
  },
});

如果必须保留flexDirection: 'row'，给GooglePlacesAutocomplete添加flex: 1确保它占满父容器宽度：

<GooglePlacesAutocomplete
  style={{ flex: 1 }}
  placeholder="Search location"
  onPress={handlePlacePress}
  query={{
    key: process.env.PUBLIC_MY_KEY,
    language: 'en',
  }}
/>

3. 下拉列表层级不足被遮挡 #

父容器的elevation: 5可能让下拉列表层级低于父容器，导致点击无法穿透。给下拉列表设置更高的层级：

<GooglePlacesAutocomplete
  placeholder="Search location"
  onPress={handlePlacePress}
  query={{
    key: process.env.PUBLIC_MY_KEY,
    language: 'en',
  }}
  styles={{
    listView: {
      zIndex: 1000,
      backgroundColor: '#ffffff',
    },
  }}
/>

4. 组件版本存在bug #

检查react-native-google-places-autocomplete的版本，旧版本可能存在onPress事件触发异常。尝试升级到最新稳定版：

npm install react-native-google-places-autocomplete@latest
# 或使用yarn
yarn add react-native-google-places-autocomplete@latest

5. 其他元素拦截点击事件 #

排查页面中是否有绝对定位的元素覆盖在建议列表上方，临时移除其他组件，只保留GooglePlacesAutocomplete测试是否能触发onPress。

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