React-Native中的Google地图（iOS）

问题描述：

我的目标是在React Native中显示Google地图。我看过一些使用带有UIMapView或MapBox地图的Google Maps SDK的例子，但这不是我正在寻找的。React-Native中的Google地图（iOS）

我目前没有错误。这里是我的代码：

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

组件周围有一个红色边框，但内部没有显示。我是React Native新手，而且是StackOverflow的新手。不幸的是，他们不会让我上传截图，直到我有更多的声望。

有一条线我怀疑要关闭，但不知道要改变它。 RCTGoogleMapViewManager.h中的第8行说：“@interface RCTGoogleMapViewManager：RCTViewManager”。我已经使用UITextViewDelegates用于其他自定义组件，但是此映射不是TextView。可能是这样，但我不知道。

任何帮助都将不胜感激。

答

您签出https://github.com/peterprokop/ReactNativeGoogleMaps吗？它看起来相当初步，但它应该仍然是非常有用的。

答

如果组件周围有红色边框，但内部没有显示，则表示您没有正确链接库。

查阅这里的文档： http://facebook.github.io/react-native/releases/0.25/docs/linking-libraries-ios.html

React-Native中的Google地图（iOS）

相关推荐