0

描述错误

在我的情况下，地图没有显示在发布 APK 中（标记显示正确）。但是调试构建是可以的。

我也测试过创建不同的令牌。

例子

import React, {Component} from 'react';
import Mapbox, {MapView, Camera} from '@react-native-mapbox-gl/maps';
import {Dimensions, Alert, View, Image, Platform} from 'react-native';
const appConfig = require('../../../app.json');
Mapbox.setAccessToken(appConfig.mapboxAccessToken);

const {height, width} = Dimensions.get('window');

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      basicSetup: {
        showUserLocation: true,
        centerCoordinate: [],
        zoomLevel: 12,
        maxZoomLevel: 19,
        compassEnabled: true,
        logoEnabled: false,
        attributionEnabled: false,
      },
      disable: {
        zoomEnabled: false,
        scrollEnabled: false,
        pitchEnabled: false,
        rotateEnabled: false,
      },
    };
  }
  render() {

    return (
      <View style={[styles.map, style]}>
        <MapView
          styleURL={appConfig['someconfigname']}
          style={{flex: 1}}
          ref={(ref) => {
            this.control = ref;
          }}>
          <Camera ref={(c) => (this.camera = c)} zoomLevel={14} />
          {children}
        </MapView>

        {hideLogo ? null : (
          <View style={[styles.logo, logoStyle]}>
            <Image
              resizeMode={'contain'}
              source={require('../../../resources/images/map_logo.png')}
              style={{flex: 1}}
            />
          </View>
        )}
      </View>
    );
  }
}

export default Map;

const styles = {
  map: {
    width,
    height,
  },
  logo: {
    position: 'absolute',
    bottom: Platform.OS == 'ios' ? 20 : 40,
    left: 20,
    shadowColor: '#37474f',
    shadowOpacity: 0.24,
    shadowOffset: {height: 2, width: 0},
    elevation: 3,
    shadowRadius: 3,
  },
  circle: {
    position: 'absolute',
    borderWidth: 1,
    borderColor: '#111',
    backgroundColor: '#03111111',
    justifyContent: 'center',
    alignItems: 'center',
  },
  circleCenter: {
    height: 4,
    width: 4,
    borderRadius: 4,
    backgroundColor: '#a1a5d1',
  },
  radiusText: {
    fontSize: 13.47,
    color: '#a1a5d1',
  },
};

预期行为

即使处于发布模式，它也应该显示地图

截图

======= 调试模式 ======= 在此处输入图像描述

======= 发布模式 ======= 在此处输入图像描述

平台：[安卓]

设备：【一加7T】

模拟器/模拟器：[否]

操作系统：[Android 9]

react-native-mapbox-gl 版本[8.1.0-rc.1]

反应原生版本[0.62.2]

4

1 回答 1

0

现在问题解决了。Android 阻止了自定义样式 url，这就是地图没有加载的原因。只需添加一些网络规则即可绕过它。在应用程序标签下的android清单文件中添加了这个，

android:networkSecurityConfig="@xml/network_security_config"

并且，在那个 xml 文件中添加了我们需要实现的网络规则，

    <?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">custom style url</domain>
        <domain includeSubdomains="false">localhost</domain>
        <domain includeSubdomains="false">10.0.2.2</domain>
        <domain includeSubdomains="false">10.0.3.2</domain>
    </domain-config>
</network-security-config>
于 2020-07-02T05:47:12.247 回答