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

Question

目前我正在尝试实现一种使用 React-Native 在存储在用户设备上的 Mapbox 地图上显示自定义图标的方法。我以为这个例子找到了here（ShapeSourceIcon example for the official documentation as a starting point.

所以按照这个例子，我得到了以下渲染方法：

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 中使用的变量的特征集合。与上面 link 中的版本相比，它有一些小的修改。

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`

上面的代码将替换 render 方法的 MapboxGL.Images 部分中的 exampleIcon。这将不再在地图上显示图标。所以我认为可能无法显示这样的图像，但作为一种冰雹玛丽，我决定执行以下操作：

const exampleStyles = {
    icon: {
      iconImage: 'file://' + RNFS.DocumentDirectoryPath + `/336.png`,
    },
};

这会再次在地图上显示图标，所以我想一定可以根据其中一种策略显示动态图标，但我不确定了，文档对我没有任何帮助具体情况。

Answer 1

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

const exampleStyles = {
  icon: {
    iconImage: iconImage: ['get' , 'iconID'],
  },
};

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

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

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

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

React Native using RNFS in order to load and display Mapbox icons stored on the device

javascript

react-native

react-native-android

react-native-ios

react-native-mapbox-gl