React Native Mapbox将自定义标记变成黑条

时间:2018-09-29 04:39:39

标签: javascript react-native mapbox mapbox-gl

当前尝试在我的项目中实现自定义标记,但似乎无法显示这些标记。我尝试的每一种不同都会导致应用崩溃或黑条返回……

我的Map.js

import React from 'react';
import { View, StyleSheet, Image } from 'react-native';

import MapboxGL from '@mapbox/react-native-mapbox-gl';

const iconMarker = require('../assets/images/custom_marker.png');

MapboxGL.setAccessToken('ACCESS-TOKEN');

class MapTitleControl extends React.Component {
    render() {
        return(
            <View style={styles.mapLogoContainer}>
                <Image style={styles.mapLogoStyle} resizeMode='contain' source={require('../assets/images/logo_border.png')} />
            </View>
        );
    }
}

const shape = {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-73.99565, 40.73189],
    }
};


class Map extends React.Component {
    static navigationOptions = {
        headerTitle: <MapTitleControl />,
    };


    render() {
        return (
            <View style={styles.container}>
                <MapboxGL.MapView
                    styleURL={MapboxGL.StyleURL.Basic}
                    zoomLevel={11}
                    centerCoordinate={[-73.987, 40.749]}
                    style={styles.container}>
                    <MapboxGL.ShapeSource id='symbolLocationSource' shape={{ type: 'FeatureCollection', features: [ shape ] }}>
                        <MapboxGL.SymbolLayer id="symbolLocationSource" style={mapStyles.icon} />
                    </MapboxGL.ShapeSource>
                </MapboxGL.MapView>
            </View>
            )
    }
}

export default Map;

const mapStyles = MapboxGL.StyleSheet.create({
    icon: {
        iconImage: iconMarker,
        iconIgnorePlacement: true,
        iconSize: 0.5
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    mapLogoContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 44,
        width: '100%',
    },
    mapLogoStyle: {
        maxWidth: 150,
        maxHeight: 50,
    }
});

这是黑条的样子

Black Bar

我尝试了“问题”部分列出的各种解决方案,但无法解决问题。

0 个答案:

没有答案