React-Native (iOS) 中的谷歌地图
Posted
技术标签:
【中文标题】React-Native (iOS) 中的谷歌地图【英文标题】:Google Maps in React-Native (iOS) 【发布时间】:2016-04-29 07:04:17 【问题描述】:我的目标是在 React Native 中显示谷歌地图。我已经看到使用带有 UIMapView 或 MapBox 地图的 Google Maps SDK 的示例,但这不是我想要的。
我目前没有错误。这是我的代码:
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
var requireNativeComponent = require('react-native');
module.exports = requireNativeComponent('RCTGoogleMapViewManager', null);
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 的新手,也是 *** 的新手。不幸的是,在我获得更多声誉之前,他们不会让我上传屏幕截图。
我怀疑有一条线路已关闭,但不知道将其更改为什么。 RCTGoogleMapViewManager.h 中的第 8 行显示“@interface RCTGoogleMapViewManager : RCTViewManager”。我已将 UITextViewDelegates 用于其他自定义组件,但此地图不是 TextView。可能是这样,但我不知道。
任何帮助都将不胜感激。
【问题讨论】:
【参考方案1】:如果组件周围有红色边框但内部没有显示,则表示您没有正确链接库。
在此处查看文档: http://facebook.github.io/react-native/releases/0.25/docs/linking-libraries-ios.html
【讨论】:
【参考方案2】:您查看https://github.com/peterprokop/ReactNativeGoogleMaps 了吗?它看起来相当初步,但对你来说应该还是很有用的。
【讨论】:
以上是关于React-Native (iOS) 中的谷歌地图的主要内容,如果未能解决你的问题,请参考以下文章