2016-01-22 37 views
10

Moim celem jest wyświetlenie mapy Google w React Native. Widziałem przykłady, które korzystają z Google Maps SDK z mapą UIMapView lub MapBox, ale nie jest to tym, czego szukam.Mapy Google w React-Native (iOS)

Obecnie nie mam żadnych błędów. Tu jest mój kodu:

index.ios.js

'use strict'; 
import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import GoogleMaps from './ios/GoogleMaps.js'; 

class RCTGoogleMaps extends Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <GoogleMaps style={styles.map}/> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF' 
    }, 
    map: { 
     height: 500, 
     width: 300, 
     marginLeft: 50 
    } 
}); 

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

ios/GoogleMaps.js

ios/RCTGoogleMapViewManager.h

#ifndef RCTGoogleMapViewManager_h 
#define RCTGoogleMapViewManager_h 

#import <Foundation/Foundation.h> 
#import "RCTViewManager.h" 
#import <UIKit/UIKit.h> 

@interface RCTGoogleMapViewManager : RCTViewManager<UITextViewDelegate> 
@end 

#endif /* RCTGoogleMapViewManager_h */ 

ios/GoogleMapViewManager.m

#import <Foundation/Foundation.h> 
#import "RCTGoogleMapViewManager.h" 
#import "RCTBridge.h" 
#import "RCTEventDispatcher.h" 
#import "UIView+React.h" 
@import GoogleMaps; 

@implementation RCTGoogleMapViewManager 
    RCT_EXPORT_MODULE() 

- (UIView *)view { 
    GMSMapView *mapView_; 
    // Create a GMSCameraPosition that tells the map to display the 
    // coordinate -33.86,151.20 at zoom level 6. 
    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 
                  longitude:151.20 
                   zoom:6]; 
    mapView_ = [GMSMapView mapWithFrame:CGRectZero camera:camera]; 
    mapView_.myLocationEnabled = YES; 
    UIView *newView_ = mapView_; 
    //self.view = mapView_; 

    // Creates a marker in the center of the map. 
    GMSMarker *marker = [[GMSMarker alloc] init]; 
    marker.position = CLLocationCoordinate2DMake(-33.86, 151.20); 
    marker.title = @"Sydney"; 
    marker.snippet = @"Australia"; 
    marker.map = mapView_; 
    return newView_; 
} 

RCT_EXPORT_VIEW_PROPERTY(text, NSString) 

@end 

Wokół komponentu jest czerwone obramowanie, ale nic nie jest wyświetlane wewnątrz. Jestem nowy, aby React Native i nowy w StackOverflow. Niestety, nie pozwolą mi przesłać zrzutu ekranu, dopóki nie będę miał więcej reputacji.

Jest jedna linia, którą podejrzewam, że jestem wyłączona, ale nie mam pojęcia, jak ją zmienić. Wiersz nr 8 w RCTGoogleMapViewManager.h mówi: "@interface RCTGoogleMapViewManager: RCTViewManager". Użyłem UITextViewDelegates dla innych niestandardowych składników, ale ta mapa nie jest TextView. To może być to, ale nie mam pojęcia.

Każda pomoc w ogóle byłaby doceniana.

Odpowiedz