Question

我在文档后面构建了一个自定义的React Native UI组件。这个想法是它将是Google Maps iOS API的一个实现，但是现在它只是为了显示标准的Apple地图。

我使用命令fig_fname = 'example'; print(gcf,'-depsc2',[fig_fname '.eps']);构建了一个新模块。这将所有模块文件添加到react-native new-library GoogleMapView。

我有一个名为/Libraries/GoogleMapView/的文件，其中包含：

GoogleMapViewManager.h

#import "RCTViewManager.h" @interface GoogleMapManager : RCTViewManager @end文件包含：

GoogleMapManager.m

这显然是根据文档显示地图所需的最低要求。这确实构建了，应用程序启动就好了。

在JavaScript方面，我有一个名为#import <MapKit/MapKit.h> #import "GoogleMapManager.h" @implementation GoogleMapManager RCT_EXPORT_MODULE() - (UIView *)view { return [[MKMapView alloc] init]; } @end的文件，其中包含：

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;

然后在JSX视图中使用它有点像这样（这是来自我的Map.js组件）：

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

我收到了“不变违规”错误。我不太清楚这意味着什么，完整的堆栈跟踪说明了这一点：

render: function() {
    return (
        <View style={styles.flexContainer}>
            <GoogleMap/>
        </View>
    );
}

我在这里搞砸了什么，因为我无法解决这个问题？

Answer 1

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

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

而不是试图将它全部捆绑在React中：

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

自定义React Native UI组件：不变违规

1 个答案: