Il mio obiettivo è visualizzare una mappa di Google in React Native. Ho visto esempi che utilizzano l'SDK di Google Maps con un UIMapView o una mappa MapBox, ma non è quello che sto cercando.Google Maps in React-Native (iOS)
Attualmente non ho errori. Ecco il mio codice:
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
C'è un bordo rosso attorno al componente, ma non viene visualizzato nulla all'interno. Sono nuovo di React Native e nuovo per StackOverflow. Sfortunatamente, non mi permetteranno di caricare uno screenshot finché non avrò più reputazione.
C'è una riga che sospetto essere off, ma non ho idea di cosa cambiarlo. La riga n. 8 in RCTGoogleMapViewManager.h dice "@interface RCTGoogleMapViewManager: RCTViewManager". Ho usato UITextViewDelegates per altri componenti personalizzati, ma questa mappa non è una TextView. Potrebbe essere, ma non ne ho idea.
Qualsiasi aiuto sarebbe apprezzato.