如何修改react-native-maps中Google Map预览图的背景色？

针对深色主题下react-native-maps渲染时出现的白色预览图闪烁问题，可从原生配置和React Native层兼容两个方向解决：

一、原生端针对性配置 #

Android 端 #

找到项目中android/app/src/main/res/values/styles.xml文件，添加或修改MapView的专属样式，将背景色设置为和你的深色主题一致的色值：

<resources>
    <!-- 保留原有AppTheme配置 -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:mapViewStyle">@style/MapViewStyle</item>
        <!-- 其他主题属性... -->
    </style>

    <!-- 定义MapView样式 -->
    <style name="MapViewStyle" parent="Base.MapViewStyle">
        <item name="android:background">#121212</item> <!-- 替换为你的深色主题色值 -->
    </style>
</resources>

iOS 端 #

打开ios/[你的项目名称]/Info.plist，添加Google地图背景色配置项：

<key>GMSMapViewBackgroundColor</key>
<color>#121212</color> <!-- 替换为你的深色主题色值 -->

二、React Native层通用遮罩方案 #

如果不想修改原生代码，也可以在MapView外层套一个同深色主题的遮罩View，利用onMapReady事件判断地图加载状态，加载完成后隐藏遮罩：

import { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';

const DarkMap = () => {
  const [isMapReady, setIsMapReady] = useState(false);

  return (
    <View style={styles.container}>
      {/* 初始遮罩，和深色主题同色 */}
      {!isMapReady && <View style={styles.mapMask} />}
      <MapView
        style={styles.map}
        onMapReady={() => setIsMapReady(true)}
        // 你的地图配置（比如region、样式等）
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#121212', // 深色主题背景色
  },
  map: {
    flex: 1,
  },
  mapMask: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#121212', // 和容器背景色一致
  },
});

export default DarkMap;

原理说明：Google Maps初始化阶段的默认预览背景为白色，在深色主题下与页面背景反差过大导致闪烁。通过设置地图组件原生背景色，或用同色遮罩过渡，就能消除视觉闪烁。

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