菜鸟教程小白 发表于 2022-12-11 17:02:43

javascript - react 原生 : Call method of RCTViewManager and Render a View


                                            <p><p>在 React Native 中,是否可以渲染 RCTBridgeModule 的 UIView 并调用此 Module 的方法?
下面我发布了我用两种方法创建的模块。但我不知道它是否正确:</p>

<p>RCTAugmentPlayerManager.h</p>

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

@interface RCTAugmentPlayerManager : NSObject &lt;RCTBridgeModule&gt;
@end
</code></pre>

<p>RCTAugmentPlayerManager.m</p>

<pre><code>@implementation RCTAugmentPlayerManager

RCT_EXPORT_MODULE();

// Method which execute treatment
RCT_EXPORT_METHOD(oneMethod:(NSString *)name )
{
RCTLogInfo(@&#34;Display name %@&#34;, name);
}

// Method which return a view to render in Javascript
RCT_EXPORT_METHOD(methodWithReturnView)
{
   UIView * view = [ init];
   return view;
}
@end
</code></pre>

<p>AugmentPlayer.js</p>

<pre><code>import { NativeModules } from &#39;react-native&#39;;
var RCTAugmentPlayerManager = NativeModules.RCTAugmentPlayerManager;
</code></pre>

<p>index.ios.js</p>

<pre><code>import React, { Component } from &#39;react&#39;;
import {
AppRegistry,
StyleSheet,
Text,
View,
NativeModules
} from &#39;react-native&#39;;

class mobileApp extends Component {

    constructor(props){
      super(props);

      var augment = NativeModules.AugmentPlayer;
      augment.oneMethod(&#39;test&#39;);
    }
render() {

    return (

    &lt;View style={{height:200, width:200}}&gt;      
      {AugmentPlayer.methodWithReturnView}
    &lt;/View&gt;
    );
}
}   

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

<p>谢谢</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p><strong>TL;DR:</strong>不,你不能。</p>

<p>要渲染 <code>UIView</code>,您必须继承 <code>RCTViewManager</code> 并在 <code>view</code> 方法中返回您的 View :</p>

<pre><code>@interface MyCoolViewManager: RCTViewManager
@end

@implementation MyCoolViewManager

RCT_EXPORT_MODULE()

-(UIView *)view {
   return ;
}

@end
</code></pre>

<p>有关更多信息,请参阅文档,其中非常详细地说明了您需要做什么:</p>

<p> <a href="http://facebook.github.io/react-native/docs/native-components-ios.html" rel="noreferrer noopener nofollow">http://facebook.github.io/react-native/docs/native-components-ios.html</a> </p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript -react 原生 : Call method of RCTViewManager and Render a View,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/38500614/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/38500614/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - react 原生 : Call method of RCTViewManager and Render a View