Моя цель - отобразить карту Google в книге React Native. Я видел примеры, которые используют SDK Google Maps с картой UIMapView или MapBox, но это не то, что я ищу.
В настоящее время у меня нет ошибок. Вот мой код:
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);
ИОС/GoogleMaps.js
var {requireNativeComponent} = require('react-native');
module.exports = requireNativeComponent('RCTGoogleMapViewManager', null);
ИОС/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 */
ИОС/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
Красная рамка вокруг компонента, но внутри ничего не отображается. Я новичок в React Native и новичок в StackOverflow. К сожалению, они не позволят мне загружать скриншот, пока у меня не будет больше репутации.
Есть одна строка, которая, как я подозреваю, выключена, но понятия не имею, что ее изменить. Строка №8 в RCTGoogleMapViewManager.h говорит: "@interface RCTGoogleMapViewManager: RCTViewManager". Я использовал UITextViewDelegates для других настраиваемых компонентов, но эта карта не является TextView. Возможно, это так, но я понятия не имею.
Любая помощь вообще будет оценена.