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.