React Native Mapbox compassImage

Question

我正在开发 React Native 项目，其中我从 rnmapbox 添加了地图。 除了自定义指南针图像之外，一切正常，我做错了什么？

关于此案例的例子并不多，因此如果有人这样做过，我将非常感谢您的帮助。

import React, {useState, useEffect} from 'react';
    import {
    useWindowDimensions,
    StyleSheet,
    View,
    PermissionsAndroid,
    Platform,
    ImageSourcePropType,
    } from 'react-native';
    import Mapbox from '@rnmapbox/maps';
    Mapbox.setAccessToken(
    'myAccessToken',
    );
    Mapbox.setTelemetryEnabled(false);

    const images = {
    compass: require('../../assets/icons/compass.png'),
    };

    const Map: React.FC = () => {
    const [stateLng, setLng] = useState(10.4402);
    const [stateLat, setLat] = useState(10.5081);
    const [destinationCoords, setDestinationCoords] = useState<[number, number]>([
    10.4402, 10.5081,
    ]);

    return (
    <View style={styles.container}>
      <Mapbox.MapView
        style={styles.map}
        compassEnabled={true}
        compassImage="compass"
        scrollEnabled={true}
        rotateEnabled={true}
        scaleBarEnabled={false}
        gestureSettings={{
          doubleTapToZoomInEnabled: true,
          doubleTouchToZoomOutEnabled: true,
          pinchPanEnabled: true,
          pinchZoomEnabled: true,
        }}>
        <Mapbox.Camera
          centerCoordinate={[stateLng, stateLat]}
          zoomLevel={17}
          animationMode={'flyTo'}
          animationDuration={6000}
        />
        <Mapbox.Images images={images} />
        <Mapbox.PointAnnotation
          id="destinationPoint"
          coordinate={destinationCoords}>
        </Mapbox.PointAnnotation>
        <Mapbox.UserLocation
          animated={true}
          androidRenderMode={'gps'}
          showsUserHeadingIndicator={true}
        />
      </Mapbox.MapView>
    </View>
    );
    };

    export default Map;

    const styles = StyleSheet.create({
    container: {
      width: '100%',
    },
    map: {
      flex: 1,
    },
    });

提前谢谢你们。

Answer 1

是的，同意这些例子有点缺乏，但有这个提示（https://github.com/rnmapbox/maps-docs/blob/bc9822503485e50866dec3bff6cfa40fba0bdd9e/docs/components/Images.md）

键是名称 - 请参阅 iconImage 表达式

我的工作如下

const images = { 
  compass: {
    image: require('../../assets/icons/compass.png')
  }
};