菜鸟教程小白 发表于 2022-12-12 16:42:46

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


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

<p>我使用命令 <code>react-native new-library GoogleMapView</code> 构建了一个新模块。这会将所有模块文件添加到 <code>/Libraries/GoogleMapView/</code>。</p>

<p>我有一个名为 <code>GoogleMapViewManager.h</code> 的文件，其中包含:</p>

<pre><code>#import &#34;RCTViewManager.h&#34;

@interface GoogleMapManager : RCTViewManager

@end
</code></pre>

<p><code>GoogleMapManager.m</code> 文件包含:</p>

<pre><code>#import &lt;MapKit/MapKit.h&gt;
#import &#34;GoogleMapManager.h&#34;

@implementation GoogleMapManager

RCT_EXPORT_MODULE()

- (UIView *)view
{
    return [ init];
}

@end
</code></pre>

<p>这显然是根据文档显示 map 所需的最低要求。这确实构建并且应用程序启动得很好。</p>

<p>在 JavaScript 方面，我有一个名为 <code>GoogleMapView.js</code> 的文件，其中包含:</p>

<pre><code>&#39;use strict&#39;;

var React = require(&#39;react-native&#39;);
var { requireNativeComponent } = React;

class GoogleMapView extends React.Component {
    render() {
      return &lt;GoogleMap {...this.props} /&gt;;
    }
}

GoogleMapView.propTypes = {
    //
};

var GoogleMap = requireNativeComponent(&#39;GoogleMap&#39;, GoogleMapView);

module.exports = GoogleMapView;
</code></pre>

<p>同样，这或多或少是从文档中删除的，所以我希望它能够工作，除非我在某个地方犯了错误。</p>

<p>当我尝试对这个模块做任何事情时，比如将它包含在这样的文件中:</p>

<pre><code>var React = require(&#39;react-native&#39;), {Component, View, StyleSheet, GoogleMap} = React;
</code></pre>

<p>然后在 JSXView 中使用它，有点像这样(这是来 self 的 Map.js 组件):</p>

<pre><code>render: function() {
    return (
      &lt;View style={styles.flexContainer}&gt;
            &lt;GoogleMap/&gt;
      &lt;/View&gt;
    );
}
</code></pre>

<p>我收到“不变违规”错误。我不太清楚这意味着什么，完整的堆栈跟踪是这样说的:</p>

<pre><code>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`.&#39;
2015-10-17 22:06:05.289 &#39;devtools socket closed&#39;
</code></pre>

<p>由于无法解决这个问题，我在这里有什么问题吗？</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>JavaScript 要求不正确，我需要使用:</p>

<pre><code>var GoogleMap = require(&#39;../Libraries/GoogleMapView/GoogleMapView.js&#39;);
</code></pre>

<p>而不是试图将它全部与 React 要求捆绑在一起:</p>

<pre><code>var React = require(&#39;react-native&#39;), {Component, View, StyleSheet, GoogleMap} = React;
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 自定义 React Native UI 组件 : Invariant Violation，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/33191658/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/33191658/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - 自定义 React Native UI 组件 : Invariant Violation