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 = {&nbsp; icon: {&nbsp; &nbsp; iconImage: iconImage: ['get' , 'iconID'],&nbsp; },};并生成我们需要提供给 mapbox 的正确图像，我们将遍历目录中的所有图像并将它们添加到字典中，如变量，如下所示：imagesDic[name] = {uri: 'file://' + RNFS.DocumentDirectoryPath + `/Storage Card/RoutAbel/Icons/${name}.png`};特别注意添加 'uri:' 部分的要求。