论坛 › 知识问答 › ios - react 原生渲染原生自定义 View

菜鸟教程小白 发表于 2022-12-13 13:37:18

ios - react 原生渲染原生自定义 View

                                            <p><p>我关注 <a href="http://facebook.github.io/react-native/docs/native-components-ios.html#content" rel="noreferrer noopener nofollow">this doc</a>但真的不明白如何在js端呈现我的客户 View 。</p>

<p>我使用 Storyboard生成一个简单的 View 并将其分配给我的 <code>CustomView</code> 类，该类继承了 <code>UIView</code>。</p>

<p> <a href="/image/Aevtb.jpg" rel="noreferrer noopener nofollow"><img src="/image/Aevtb.jpg" alt="enter image description here"/></a> </p>

<p>然后我像下面这样写 <code>MyCustomViewManager.m</code></p>

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

@interface MyCustomViewManager : RCTViewManager
@end

@implementation MyCustomViewManager

RCT_EXPORT_MODULE()

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

@end
</code></pre>

<p>最后我在下面写了js端文件<code>index.ios.js</code>。</p>

<pre><code>import React from &#39;react-native&#39;;

const {AppRegistry, View, requireNativeComponent,} = React;

class Demo extends React.Component {
    constructor(){
      super();
    }

    var CustomView = requireNativeComponent(&#39;CustomView&#39;, null);

    render() {
      return (
      &lt;View&gt;
          &lt;CustomView&gt;&lt;/CustomView&gt;
      &lt;/View&gt;
      );
    }
}

AppRegistry.registerComponent(&#39;Demo&#39;, () =&gt; Demo);
</code></pre>

<p>也许我做错了什么，我不明白官方文档关于以下代码的意思
<code>module.exports = requireNativeComponent('RCTMap', null);</code></p>

<p>如何在 requireNativeComponent 方法中表示原生端 <code>CustimView</code>？能给我看看代码吗，谢谢..</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>此行表示您纯粹导出 RCTMap 而不处理任何自定义属性</p>

<pre><code>module.exports = requireNativeComponent(&#39;RCTMap&#39;, null);
</code></pre>

<p>正如 React Native Docs 所说，</p>

<pre><code>import { requireNativeComponent } from &#39;react-native&#39;;

// requireNativeComponent automatically resolves this to &#34;RCTMapManager&#34;
module.exports = requireNativeComponent(&#39;RCTMap&#39;, null);
</code></pre>

<p>so <code>requireNativeComponent</code> 接收两个参数，第一个参数是您要从之前的桥接过程中导入的组件的名称，第二个参数是处理 native 组件的类，这是用于操作自定义组件中的属性和一些逻辑，就像那样 </p>

<pre><code>// MapView.js
import React from &#39;react&#39;;
import { requireNativeComponent } from &#39;react-native&#39;;

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

MapView.propTypes = {
/**
   * When this property is set to `true` and a valid camera is associated
   * with the map, the camera’s pitch angle is used to tilt the plane
   * of the map. When this property is set to `false`, the camera’s pitch
   * angle is ignored and the map is always displayed as if the user
   * is looking straight down onto it.
   */
pitchEnabled: React.PropTypes.bool,
};

var RCTMap = requireNativeComponent(&#39;RCTMap&#39;, MapView);

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

<p>希望这对关心它的人有用</p>

<p>请查看<a href="https://facebook.github.io/react-native/docs/native-components-ios.html#properties" rel="noreferrer noopener nofollow">React Native Docs</a> </p></p>
                                   
                                                <p style="font-size: 20px;">关于ios -react 原生渲染原生自定义 View ，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/34815679/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/34815679/
                                                        </a>
                                                </p>
                                       

查看完整版本: ios - react 原生渲染原生自定义 View