我已经按照文档构建了一个自定义的React Native UI组件。这个想法是它将作为Google Maps iOS API的实现,但目前仅用于显示标准的Apple地图。
我使用react-native new-library GoogleMapView
命令构建了一个新模块。这将所有模块文件添加到/Libraries/GoogleMapView/
中。
我有一个名为GoogleMapViewManager.h
的文件,其中包含:
#import "RCTViewManager.h"
@interface GoogleMapManager : RCTViewManager
@end
GoogleMapManager.m
文件包含:#import <MapKit/MapKit.h>
#import "GoogleMapManager.h"
@implementation GoogleMapManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
return [[MKMapView alloc] init];
}
@end
这显然是使地图根据文档显示所需的最低要求。这确实可以构建,并且应用程序启动正常。
在JavaScript方面,我有一个名为
GoogleMapView.js
的文件,其中包含:'use strict';
var React = require('react-native');
var { requireNativeComponent } = React;
class GoogleMapView extends React.Component {
render() {
return <GoogleMap {...this.props} />;
}
}
GoogleMapView.propTypes = {
//
};
var GoogleMap = requireNativeComponent('GoogleMap', GoogleMapView);
module.exports = GoogleMapView;
再说一次,这或多或少是从文档中取消的,所以除非我在某个地方犯了错误,否则我希望它能起作用。
当我尝试对该模块执行任何操作时,例如将其包含在文件中,如下所示:
var React = require('react-native'), {Component, View, StyleSheet, GoogleMap} = React;
然后在JSX视图中使用它(如下所示)(来自我的Map.js组件):
render: function() {
return (
<View style={styles.flexContainer}>
<GoogleMap/>
</View>
);
}
我收到“不变违规”错误。我不太确定这是什么意思,整个堆栈跟踪都表示:
localhost:8081/index.ios.bundle
line: 2041
message: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Map`.'
2015-10-17 22:06:05.289 [warn][tid:com.facebook.React.JavaScript] 'devtools socket closed'
由于无法解决此问题,我在这里有什么麻烦吗?
最佳答案
JavaScript需求不正确,我需要使用:
var GoogleMap = require('../Libraries/GoogleMapView/GoogleMapView.js');
与其尝试将所有内容与React捆绑在一起,不如:
var React = require('react-native'), {Component, View, StyleSheet, GoogleMap} = React;