javascript - 自定义 React Native UI 组件 : Invariant Violation

Question

我已经按照文档构建了一个自定义的 React Native UI 组件。这个想法是它将成为 Google Maps iOS API 的实现，但目前它只是为了显示标准的 Apple map 。

我使用命令 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

这显然是根据文档显示 map 所需的最低要求。这确实可以构建并且应用程序可以正常启动。

在 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 View 中使用它(这是来 self 的 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'

由于我无法解决这个问题，我在这里搞砸了什么吗？

Answer 1

JavaScript 要求不正确，我需要使用:

var GoogleMap = require('../Libraries/GoogleMapView/GoogleMapView.js');

与其尝试将其全部与 React 要求捆绑在一起:

var React = require('react-native'), {Component, View, StyleSheet, GoogleMap} = React;