标记列表在 android 上而不是在 ios 上呈现答案

【问题标题】：markers list renders on andriod and not on ios标记列表在 android 上而不是在 ios 上呈现
【发布时间】：2020-11-13 11:10:22
【问题描述】：

我正在尝试使用 react-native-maps 在地图中呈现标记列表。

我已经成功地使用<MapView /> 渲染了地图，但由于某种原因，在地图上渲染标记列表时，它只出现在 android 上而不出现在 IOS 上。

问题是在获取数据时，因为当我尝试模拟标记数组时它正常工作。

MapviewWrapper.js:

import React from "react";
import ProvidersList from "./ProvidersList";
import MapView from "react-native-maps";
import { Layout } from "@ui-kitten/components";
import { StyleSheet, Dimensions } from "react-native";
import { mapsConfig } from "config";

const MapviewWrapper = (props) => {
  return (
    <Layout>
      <MapView
        style={styles.mapStyle}
        initialRegion={mapsConfig.INITIAL_REGION}
      >
        <ProvidersList />
      </MapView>
    </Layout>
  );
};

const styles = StyleSheet.create({
  mapStyle: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
});

export default MapviewWrapper;

ProvidersList.js

import React, { useEffect, useState } from "react";
import { Marker } from "react-native-maps";
import { View } from "react-native";
import { mapsConfig } from "config";
import { getProviders } from "api/wrappers/appService";

const getProvidersAsync = (setProviders) => {
  getProviders({
    Latitude: mapsConfig.INITIAL_REGION.latitude,
    Longitude: mapsConfig.INITIAL_REGION.longitude,
    Radius: 1000,
    MeasureUnit: 0,
  }).then((providers) => setProviders(providers));
};

const ProvidersList = (props) => {
  const [providers, setProviders] = useState([]);

  useEffect(() => {
    getProvidersAsync(setProviders);
  }, []);

  return (
    <View>
      {providers.length > 0 &&
        providers.map((provider, id) => (
          <Marker
            key={id}
            coordinate={{
              longitude: provider.Location.Longitude,
              latitude: provider.Location.Latitude,
            }}
            title={provider.Title}
            description={provider.Description}
          />
        ))}
    </View>
  );
};

export default ProvidersList;

【问题讨论】：

标签： reactjs react-native react-native-maps

【解决方案1】：

问题是因为我在视图而不是片段中呈现了标记列表。

标记现在也出现在 IOS 上。

【讨论】：

【解决方案2】：

试试这个方法

<MapView
         ref={MapView => (this.MapView = MapView)}
         style={styles.map}
         initialRegion={this.state.region}
         loadingEnabled = {true}
         loadingIndicatorColor="#666666"
         loadingBackgroundColor="#eeeeee"
         moveOnMarkerPress = {false}
         showsUserLocation={true}
         showsCompass={true}
         showsPointsOfInterest = {false}
         provider="google">
         {this.state.markers.map((marker:any)  => (  
              <MapView.Marker
                key={marker.id}
                coordinate={marker.coordinate}
                title={marker.title}
                description={marker.description}
              />
         }
      </MapView>

【讨论】：