React Native GooglePlacesAutocomplete 导致 Expo 应用程序出现白屏

Question

我在 Expo 应用程序中使用

react-native-google-places-autocomplete

来允许用户搜索地点。但是，当我集成

GooglePlacesAutocomplete

组件时，应用程序仅显示白屏。我怀疑这可能是由于我的实现方式或可能是 API 密钥或配置的问题。这是我的代码的相关部分：

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,
  },
});

问题： 每当我包含 GooglePlacesAutocomplete 组件时，应用程序都会显示白屏。我已检查我的 API 密钥是否已在 Google Cloud Console 上为 Places API 和 Maps JavaScript API 启用，并且我确认如果删除此自动完成组件，其他组件会正确呈现。

附加信息： 我正在使用 Expo 并在物理 iOS 设备上运行该应用程序。 API 密钥已启用计费，我已尝试限制它并使其不受测试限制。 控制台没有记录任何错误。

问题：

Expo 上的 GooglePlacesAutocomplete 是否有任何特定内容可能导致此问题？ Expo 或 iOS 设备是否存在已知的兼容性问题？ 我如何调试它以找出问题可能源自何处？

Answer 1

导入“react-native-get-random-values”；

解决了我的问题。