Expo集成react-native-google-places-autocomplete引发白屏问题排查

问题场景 #

在Expo应用中使用react-native-google-places-autocomplete组件实现地点搜索功能，只要引入该组件，应用就显示白屏；移除组件后，其他组件（如MapView）可正常渲染。

相关代码 #

import React, { useState, useEffect } from 'react';
import * as Location from 'expo-location';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  TouchableOpacity,
  Alert,
  Linking,
  Platform,
} from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function NearbyPlacesScreen() {
  const [location, setLocation] = useState({
    latitude: 41.0082,
    longitude: 28.9784,
  });
  const [placeName, setPlaceName] = useState('');
  const [details, setDetails] = useState(null);

  return (
    <SafeAreaView style={styles.container}>
      <GooglePlacesAutocomplete
        placeholder="Where to?"
        onPress={(data, placeDetails = null) => {
          if (placeDetails) {
            setPlaceName(placeDetails.name);
            const { lat, lng } = placeDetails.geometry.location;
            setDetails(placeDetails);
            setLocation({ latitude: lat, longitude: lng });
          }
        }}
        query={{
          key: 'YOUR_API_KEY',
          language: 'en',
          type: 'establishment',
          types: 'restaurant|cafe|food',
        }}
        fetchDetails={true}
        styles={{
          container: {
            width: '100%',
            paddingTop: 48,
          },
          textInput: {
            height: 44,
            fontSize: 16,
            borderRadius: 8,
          },
          listView: {
            overflow: 'hidden',
            borderRadius: 8,
          },
        }}
      />
      <MapView
        style={styles.map}
        region={{
          latitude: location.latitude,
          longitude: location.longitude,
          latitudeDelta: 0.1,
          longitudeDelta: 0.1,
        }}
      >
        {location && placeName && (
          <Marker
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
            title={placeName}
          />
        )}
      </MapView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

已知信息 #

• 运行环境：Expo + iOS物理设备
• API配置：已启用Places API、Maps JavaScript API，密钥已开启计费，测试过受限/不受限两种状态
• 控制台无错误日志输出

疑问1：Expo上使用GooglePlacesAutocomplete是否有特定问题？ #

有。该组件是纯JS实现，但在Expo环境中需注意两点：

1. API密钥限制：如果密钥设置了Bundle ID限制，必须确保iOS设备对应的Expo应用Bundle ID（可在app.json的ios.bundleIdentifier中查看）已添加到Google Cloud的密钥限制列表，否则请求会被拦截，可能导致组件渲染失败。
2. 版本兼容性：部分旧版本的组件可能和当前Expo SDK依赖的React Native核心API不兼容，导致渲染异常。

疑问2：是否存在与Expo或iOS设备的已知兼容性问题？ #

存在几种常见情况：

• 样式层级冲突：你的MapView使用了absoluteFillObject会覆盖全屏，若GooglePlacesAutocomplete未设置足够高的zIndex，会被地图完全遮挡，看起来像白屏（实际组件已渲染但不可见）。
• Expo SDK版本适配：Expo SDK 49+对React Native渲染逻辑有调整，旧版本的react-native-google-places-autocomplete可能存在适配问题。
• 网络请求限制：Expo默认允许HTTPS请求，但如果设备网络环境有代理或防火墙，可能拦截组件向Google Places API发起的请求，导致组件加载失败。

疑问3：如何调试以定位问题根源？ #

按以下步骤逐步排查：

1. 单独测试组件：临时注释MapView，只保留SafeAreaView和GooglePlacesAutocomplete，若能正常显示，说明是样式层级问题，给组件的container样式添加zIndex: 1000即可。
2. 添加错误捕获：用自定义ErrorBoundary包裹组件，捕获渲染错误并输出日志：

   class ErrorBoundary extends React.Component {
     constructor(props) {
       super(props);
       this.state = { hasError: false };
     }
   
     static getDerivedStateFromError(error) {
       return { hasError: true };
     }
   
     componentDidCatch(error, errorInfo) {
       console.log('组件渲染错误:', error.message, errorInfo.componentStack);
     }
   
     render() {
       if (this.state.hasError) {
         return <Text>搜索组件加载失败</Text>;
       }
       return this.props.children;
     }
   }
   

   将GooglePlacesAutocomplete放入ErrorBoundary中，查看控制台是否有错误输出。
3. 验证API请求：用Postman直接调用Google Places Autocomplete API，使用你的密钥，检查是否能返回正常结果：

   https://maps.googleapis.com/maps/api/place/autocomplete/json?input=coffee&key=YOUR_API_KEY&language=en&type=establishment&types=restaurant|cafe|food
   

   若请求失败，重点检查API密钥的权限和限制设置；若请求成功，说明组件内部请求逻辑可能存在问题。
4. 查看Expo网络日志：打开Expo DevTools的Network标签，查看组件发起的网络请求状态，确认是否存在请求超时、失败的情况。
5. 清除Expo缓存：运行expo r -c清除缓存后重新打包，避免缓存导致的异常。

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