React Native iOS自定义标记数量/尺寸增加时无法完整渲染

需求背景 #

使用react-native-maps库在Android和iOS端渲染16-900个自定义标记。

问题现象 #

当标记数量超过60个或标记尺寸增大时，iOS端部分标记无法完整渲染；但点击对应区域后，标记会正常显示。Android端无此问题，推测是iOS端渲染机制导致。

问题表现截图：

标记数据格式 #

const markers = [
  {key: 0, latitude: 34.123, longitude: 134.123},
  {key: 1, latitude: 35.123, longitude: 135.123},
  {key: 2, latitude: 36.123, longitude: 136.123},
  // ...更多标记
];

相关代码 #

地图组件（CustomMap） #

注：标记数据通过API获取后存入state

import React from 'react';
import { View } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

class CustomMap extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      markers: [],
      region: {
        latitude: 34.334653,
        longitude: 134.365288,
        latitudeDelta: 0.45,
        longitudeDelta: 0.45,
      },
    };
  }

  render() {
    const { region, markers } = this.state;

    return (
      <View style={{ flex: 1 }}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={region}
          region={region}
          ref={ref => (this.map = ref)}
        >
          {markers &&
            markers.map((marker, index) => (
              <CustomMarker marker={marker} key={index} />
            ))}
        </MapView>
      </View>
    );
  }
}

自定义标记组件（CustomMarker） #

import React from 'react';
import { Image } from 'react-native';
import { Marker } from 'react-native-maps';

const CustomMarker = ({ marker }) => {
  return (
    <Marker
      key={marker.key}
      coordinate={marker}
    >
      <Image fadeDuration={0} source={getIcon(marker)} />
    </Marker>
  );
};

const getIcon = marker => {
  switch (marker?.id) {
    case 'a':
      return require('Assets/Images/img1/a.png');
    case 'b':
      return require('Assets/Images/img2/b.png');
    case 'c':
      return require('Assets/Images/img3/c.png');
    default:
      return null;
  }
};

已尝试的解决方案 #

• 使用react-native-maps的Marker组件原生icon和image属性，标记数量超过700时问题仍存在
• 用SVG图片替代React Native的Image组件，无改善
• 使用默认标记时，iOS和Android均能正常渲染
• 尝试通过ref将Marker的tracksViewChanges设为false（参考相关社区解决方案思路）

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