React Native 地图标记和标记标注上的图标未呈现答案

【问题标题】：Icons on React Native map markers and markers callouts not renderedReact Native 地图标记和标记标注上的图标未呈现
【发布时间】：2021-09-10 05:54:36
【问题描述】：

在我的应用程序中，MapView 带有条件渲染的标记：

renderSpotMarker = (spot, index, myLocation) =>
    <Marker key={index}
      tracksViewChanges={false}
      coordinate={coordsForMarker(spot.GEO_LOCATION)}
      title={spot.NAME}
      onPress={() => this.setLastOpenMarkerLocation(spot)}
      description={spot.DESCRIPTION}>
      <View
        style={[styles.marker, spot.DIFFICULTY === 0 ? { backgroundColor: colors.easy } : (spot.DIFFICULTY === 1 ? { backgroundColor: colors.intermediate } : (spot.DIFFICULTY === 2 ? { backgroundColor: colors.advanced } : { backgroundColor: colors.pro }))]}>
        <Image style={baseStyles.infoIcon24} source={getSpotWaterTypeIc(spot.WATER_TYPE)}/>
      </View>
      <Callout
        tooltip={true}
        onPress={() => this.props.navigation.navigate('SpotInfo', {
          chosenSpot: spot,
          distance: calculateDistance(spot.GEO_LOCATION, myLocation)
      })}>
      <SpotMarkerCallout
        marker={spot}
        userLoc={myLocation}
      />
   </Callout>
</Marker>

根据 spot.DIFFICULTY 和 spot.WATER_TYPE 标记有不同的颜色和图像。它正在工作，但总是当用户打开应用程序时，一些图像未加载：

当我刷新 MapView 时，一切都开始正常工作：

此外，当我第一次打开标记标注时，此标注中的图标不会呈现：

加载视图刷新图标后：

怎么了？我试图添加：

await Asset.loadAsync([
  require('../../assets/images/ic_wave.png'),
  require('../../assets/images/ic_flat.png'),
  require('../../assets/images/windsurfing_icon.png'),
  require('../../assets/images/kitesurfing_icon.png'),
  require('../../assets/images/surfing_icon.png')
])

在此组件的componentDidMount() 上，但它没有修复任何问题。

【问题讨论】：

标签： react-native google-maps expo google-maps-markers

【解决方案1】：

我尝试过使用 UseStateRef:https://www.npmjs.com/package/react-usestateref。 refObject.current 将保存该值。

【讨论】：