javascript - 无法看到 MapBox React Native GL 注释

Question

我正在使用 React Native 构建一个应用程序，并且想要使用 MapBox GL Component渲染 map 并添加注释。我正在尝试实现 this example来自 github 存储库。

我已尽力按照安装说明进行操作，但加载 map 时，注释不存在。我明白了:

Xcode 中出现此错误(3 次):

Oct 14 20:45:08  MapBoxDemo[9268] <Error>: CGContextRestoreGState: invalid context 0x0. Backtrace:
      <-[UIStatusBarItemView updateContentsAndWidth]+33>
       <-[UIStatusBarItemView initWithItem:data:actions:style:]+477>
        <+[UIStatusBarItemView createViewForItem:withData:actions:foregroundStyle:]+134>
         <-[UIStatusBarLayoutManager _createViewForItem:withData:actions:]+163>
          <-[UIStatusBarLayoutManager _prepareEnabledItemType:withEnabledItems:withData:actions:itemAppearing:itemDisappearing:]+36
           <-[UIStatusBarLayoutManager prepareEnabledItems:withData:actions:]+92>
            <-[UIStatusBarForegroundView _setStatusBarData:actions:animated:]+797>
             <-[UIStatusBarForegroundView setStatusBarData:actions:animated:]+332>
              <__51-[UIStatusBar _prepareToSetStyle:animation:forced:]_block_invoke+360>
               <+[UIView(Animation) performWithoutAnimation:]+65>
                <-[UIStatusBar _prepareToSetStyle:animation:forced:]+866>
                 <-[UIStatusBar _requestStyleAttributes:animationParameters:forced:]+391>
                  <-[UIStatusBar requestStyle:animationParameters:forced:]+437>
                   <-[UIStatusBar requestStyle:animated:forced:]+90>
                    <-[UIStatusBar _evaluateServerRegistration]+250>
                     <__45-[UIView(Hierarchy) _postMovedFromSuperview:]_block_invoke+590>
                      <-[UIView(Hierarchy) _postMovedFromSuperview:]+544>
                       <-[UIView(Internal) _addSubview:positioned:relativeTo:]+1967>
                        <-[UIStatusBarWindow setStatusBar:]+288>
                         <-[UIApplication _createStatusBarWithRequestedStyle:orientation:hidden:]+340>
                          <-[UIApplication _runWithMainScene:transitionContext:completion:]+950>
                           <-[UIApplication workspaceDidEndTransaction:]+188>
                            <-[FBSSerialQueue _performNext]+192>
                             <-[FBSSerialQueue _performNextFromRunLoopSource]+45>
                              <__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__+17>
                               <__CFRunLoopDoSources0+556>
                                <__CFRunLoopRun+867>
                                 <CFRunLoopRunSpecific+488>
                                  <-[UIApplication _run]+402>
                                   <UIApplicationMain+171>
                                    <main+111>
                                     <start+1>

还有这个(仅一次):

2015-10-14 20:45:09.328 [warn][tid:com.facebook.React.JavaScript] 'Warning: Failed propType: typeChecker is not a function. (In \'typeChecker(\npropValue,\ni,\ncomponentName,\nlocation,\npropFullName + \'[\' + i + \']\')\', \'typeChecker\' is undefined) Check the render method of `MapBoxDemo`.'

我已将 map 中心设置为与第一个注释相同的位置，因此它肯定应该在 View 中。

所有其他功能似乎都可以工作(重新定位 map 、缩放等)。我还看到了example used here并且它可以工作(至少在 iOS 8 上)。

有什么想法吗？会不会跟iOS9有关？我的代码如下:

    'use strict';

var React = require('react-native');
var MapboxGLMap = require('react-native-mapbox-gl');
var mapRef = 'mapRef';
var {
  AppRegistry,
  StyleSheet,
  Text,
  StatusBarIOS,
  View
} = React;

var MapBoxDemo = React.createClass({
  mixins: [MapboxGLMap.Mixin],
  getInitialState() {
    return {
      center: {
        latitude: 40.72052634,
        longitude: -73.97686958312988
      },
      zoom: 11,
      annotations: [{
        coordinates: [40.72052634, -73.97686958312988],
        "type": "point",
        title: 'This is marker 1',
        subtitle: 'It has a rightCalloutAccessory too',
        rightCalloutAccessory: {
          url: 'https://cldup.com/9Lp0EaBw5s.png',
          height: 25,
          width: 25
        },
        annotationImage: {
          url: 'https://cldup.com/CnRLZem9k9.png',
          height: 25,
          width: 25
        },
        id: 'marker1'
      }, {
        coordinates: [40.714541341726175,-74.00579452514648],
        "type": "point",
        title: 'Important!',
        subtitle: 'Neat, this is a custom annotation image',
        annotationImage: {
          url: 'https://cldup.com/7NLZklp8zS.png',
          height: 25,
          width: 25
        },
        id: 'marker2'
      }, {
        "coordinates": [[40.76572150042782,-73.99429321289062],[40.743485405490695, -74.00218963623047],[40.728266950429735,-74.00218963623047],[40.728266950429735,-73.99154663085938],[40.73633186448861,-73.98983001708984],[40.74465591168391,-73.98914337158203],[40.749337730454826,-73.9870834350586]],
        "type": "polyline",
        "strokeColor": "#00FB00",
        "strokeWidth": 4,
        "strokeAlpha": .5,
        "id": "foobar"
      }, {
        "coordinates": [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
        "type": "polygon",
        "fillAlpha":1,
        "strokeColor": "#fffff",
        "fillColor": "blue",
        "id": "zap"
      }]
     };
  },

  render: function() {
    StatusBarIOS.setHidden(true);
    return (
      <View style={styles.container}>

        <Text style={styles.text} onPress={() => this.addAnnotations(mapRef, [{
          coordinates: [40.73312,-73.989],
          type: 'point',
          title: 'This is a new marker',
          id: 'foo'
        }, {
          "coordinates": [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
          "type": "polygon",
          "fillAlpha": 1,
          "fillColor": "#000",
          "strokeAlpha": 1,
          "id": "new-black-polygon"
        }])}>
          Add new marker
        </Text>
        <Text style={styles.text} onPress={() => this.selectAnnotationAnimated(mapRef, 0)}>
          Open first popup
        </Text>
        <Text style={styles.text} onPress={() => this.removeAnnotation(mapRef, 0)}>
          Remove first annotation
        </Text>
        <MapboxGLMap
          style={styles.map}
          direction={0}
          rotateEnabled={true}
          scrollEnabled={true}
          zoomEnabled={true}
          showsUserLocation={true}
          ref={mapRef}
          accessToken={'pk.eyJ1IjoibWF0dGhld2JldGEiLCJhIjoiY2lmcGZxdnpnMDFqOXVlbHllazRwcWxqZSJ9.M0lbiLNHcd-WT-Ps_MkCvA'}
          styleURL={'asset://styles/streets-v8.json'}
          centerCoordinate={this.state.center}
          userLocationVisible={true}
          zoomLevel={this.state.zoom}
          onRegionChange={this.onRegionChange}
          onRegionWillChange={this.onRegionWillChange}
          annotations={this.state.annotations}
          onOpenAnnotation={this.onOpenAnnotation}
          onRightAnnotationTapped={this.onRightAnnotationTapped}
          onUpdateUserLocation={this.onUpdateUserLocation} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1
  },
  map: {
    flex: 1
  },
  text: {
    padding: 3
  }
});

AppRegistry.registerComponent('MapBoxDemo', () => MapBoxDemo);

Answer 1

Xcode 中是否有任何错误？此外，删除不必要的代码并尝试向 map 添加注释可能是个好主意。

如果您也可以尝试在 React Playground 上运行代码，我也许可以帮助更好地调试它，这是一个示例: https://rnplay.org/apps/KR9WOw