我有一个应用程序在黑暗的主题与react-native-maps。当Map组件呈现时，谷歌的第一个白色预览会出现几毫秒。如果应用程序的主题是白色的，这是确定的，但在黑暗的主题 Flink 发生。你能告诉我如何改变谷歌Map预览的背景颜色吗？
rjzwgtxy1#
您可以将MapView userInterfaceStyle属性与'light' | 'dark'配合使用，也可以创建自定义Map样式，如www.example.com中所https://github.com/react-native-maps/react-native-maps#customizing-the-map-style
userInterfaceStyle
'light' | 'dark'
q0qdq0h22#
使用自定义样式Map视图将浅色背景更改为深色const mapCustomStyle =[{"elementType "："geometry"，"stylers"：[{"color "："#242f3e "}]}，{"elementType"："labels. text. fill"，"stylers"：[{"color "："#746855 "}]}，{"elementType"："labels. text. stroke"，"stylers"：[{"color "："#242f3e "}]}，{"featureType"："administrative. locality"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#d59563 "}]}，{"featureType"："poi"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#d59563 "}]}，{"featureType"："poi. park"，"elementType"："geometry"，"stylers"：[{"color "："#263c3f "}]}，{"featureType"："poi. park"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#6b9a76 "}]}，{"featureType"："road"，"elementType"："geometry"，"stylers"：[{"color "："#38414e "}]}，{"featureType"："road"，"elementType"："几何图形.笔划"，"stylers"：[{"color "："#212a37 "}]}，{"featureType"："road"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#9ca5b3 "}]}，{"featureType"："road. highway"，"elementType"："geometry"，"stylers"：[{"color "："#746855 "}]}，{"featureType"："road. highway"，"elementType"："几何图形.笔划"，"stylers"：[{"color "："#1f2835 "}]}，{"featureType"："road. highway"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#f3d19c "}]}，{"featureType"："transit"，"elementType"："geometry"，"stylers"：[{"color "："#2f3948 "}]}，{"featureType"："transit. station"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#d59563 "}]}，{"featureType"："water"，"elementType"："geometry"，"stylers"：[{"color "："#17263c "}]}，{"featureType"："water"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#515c6d "}]}，{"featureType"："water"，"elementType"："labels. text. stroke"，"stylers"：[{"color "：“#17263c”}]]最后在mapView中使用customMapStyle ={mapCustomStyle}感谢https://mapstyle.withgoogle.com/站点，我已经生成了上面的代码从这边
2条答案
按热度按时间rjzwgtxy1#
您可以将MapView
userInterfaceStyle属性与'light' | 'dark'配合使用，也可以创建自定义Map样式，如www.example.com中所https://github.com/react-native-maps/react-native-maps#customizing-the-map-styleq0qdq0h22#
使用自定义样式Map视图将浅色背景更改为深色
const mapCustomStyle =[{"elementType "："geometry"，"stylers"：[{"color "："#242f3e "}]}，{"elementType"："labels. text. fill"，"stylers"：[{"color "："#746855 "}]}，{"elementType"："labels. text. stroke"，"stylers"：[{"color "："#242f3e "}]}，{"featureType"："administrative. locality"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#d59563 "}]}，{"featureType"："poi"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#d59563 "}]}，{"featureType"："poi. park"，"elementType"："geometry"，"stylers"：[{"color "："#263c3f "}]}，{"featureType"："poi. park"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#6b9a76 "}]}，{"featureType"："road"，"elementType"："geometry"，"stylers"：[{"color "："#38414e "}]}，{"featureType"："road"，"elementType"："几何图形.笔划"，"stylers"：[{"color "："#212a37 "}]}，{"featureType"："road"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#9ca5b3 "}]}，{"featureType"："road. highway"，"elementType"："geometry"，"stylers"：[{"color "："#746855 "}]}，{"featureType"："road. highway"，"elementType"："几何图形.笔划"，"stylers"：[{"color "："#1f2835 "}]}，{"featureType"："road. highway"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#f3d19c "}]}，{"featureType"："transit"，"elementType"："geometry"，"stylers"：[{"color "："#2f3948 "}]}，{"featureType"："transit. station"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#d59563 "}]}，{"featureType"："water"，"elementType"："geometry"，"stylers"：[{"color "："#17263c "}]}，{"featureType"："water"，"elementType"："labels. text. fill"，"stylers"：[{"color "："#515c6d "}]}，{"featureType"："water"，"elementType"："labels. text. stroke"，"stylers"：[{"color "：“#17263c”}]]
最后在mapView中
使用customMapStyle ={mapCustomStyle}
感谢https://mapstyle.withgoogle.com/站点，我已经生成了上面的代码从这边