React Native 使用 RNFS 加载和显示存储在设备上的 Mapbox 图标

Question

目前我正在尝试实现一种使用 React-Native 在存储在用户设备上的 Mapbox 地图上显示自定义图标的方法。我认为这里找到的示例（官方文档的 ShapeSourceIcon 示例作为起点。因此，按照示例，我来到了以下渲染方法：render() {  return (     <MapboxGL.MapView        ref={map => { this.map = map; }}        style={styles.map}        logoEnabled={false}        onPress={this.onPress}        onDidFinishLoadingMap={this.finishedLoadingMap}        styleURL={'custom_url'}>        <MapboxGL.Camera            animationMode={'flyTo'}            animationDuration={2000}            centerCoordinate={[ 6.16389,52.255 ]}            zoomLevel={8}/>       <MapboxGL.Images           images={{example: exampleIcon}}       />       <MapboxGL.ShapeSource            id="routes"           shape={featureCollection}>           <MapboxGL.SymbolLayer               id="routes"               style={exampleStyles.icon}/>       </MapboxGL.ShapeSource>  )}下面是代表 shapesource 中使用的变量的特征集合。与上面链接中的修改相比，它有一些小的修改。const featureCollection = {type: 'FeatureCollection',features: [  {    type: 'Feature',    id: '9d10456e-bdda-4aa9-9269-04c1667d4552',    properties: {      icon: 'example',    },    geometry: {      type: 'Point',      coordinates: [6.1552165, 52.2660751],    },  },  {    type: 'Feature',    id: '9d10456e-bdda-4aa9-9269-04c1667d4552',    properties: {      icon: 'example',    },    geometry: {      type: 'Point',      coordinates: [26.542969, -30.221102],    },  },  {    type: 'Feature',    id: '9d10456e-bdda-4aa9-9269-04c1667d4552',    properties: {      icon: 'example',    },    geometry: {      type: 'Point',      coordinates: [-117.206562, 52.180797],    },  }, ],};示例样式如下所示：const exampleStyles = {  icon: {    iconImage: '{icon}',  },};并且 exampleIcon 变量现在只是一个简单的 png 导入到项目中。这实际上会根据 featureCollection 在指定位置显示图标。下一步是我使用 RNFS（React Native File Storage）加载一个文件，这样做是这样的：'file://' + RNFS.DocumentDirectoryPath + `/Icons/336.png`然后上面的代码将替换渲染方法的 MapboxGL.Images 部分中的 exampleIcon。这将不再在地图上显示图标。所以我想可能无法显示这样的图像，但作为一种冰雹玛丽，我决定执行以下操作：这将再次在地图上显示图标，所以我认为必须可以根据这些策略之一显示动态图标，但我不再确定，而且文档对我的特定情况没有任何帮助。

Answer 1

在关注应用程序的其他部分一段时间后，我决定重新审视这个问题。因为我已经在应用程序中做了一个解决方法，所以对我来说不再是一个太大的问题。在深入研究库之后，我终于想出了如何解决它。我需要用这样的东西替换 iconImage 对象：

const exampleStyles = {

  icon: {

    iconImage: iconImage: ['get' , 'iconID'],

  },

};

并生成我们需要提供给 mapbox 的正确图像，我们将遍历目录中的所有图像并将它们添加到字典中，如变量，如下所示：

imagesDic[name] = {uri: 'file://' + RNFS.DocumentDirectoryPath + `/Storage Card/RoutAbel/Icons/${name}.png`};

特别注意添加 'uri:' 部分的要求。