React Native:RCTViewManager的调用方法和渲染视图

时间:2016-07-21 09:42:51

标签: javascript ios xcode reactjs react-native

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

RCTAugmentPlayerManager.h

#import "RCTBridgeModule.h"

@interface RCTAugmentPlayerManager : NSObject <RCTBridgeModule>
@end

RCTAugmentPlayerManager.m

@implementation RCTAugmentPlayerManager

RCT_EXPORT_MODULE();

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

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

AugmentPlayer.js

import { NativeModules } from 'react-native';
var RCTAugmentPlayerManager = NativeModules.RCTAugmentPlayerManager;

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View, 
  NativeModules
} from 'react-native';

class mobileApp extends Component {

    constructor(props){
        super(props);

        var augment = NativeModules.AugmentPlayer; 
        augment.oneMethod('test');
    }
  render() {

    return (

    <View style={{height:200, width:200}}>      
        {AugmentPlayer.methodWithReturnView}
    </View>
    );
  }
}    

AppRegistry.registerComponent('mobileApp', () => mobileApp);

谢谢

1 个答案:

答案 0 :(得分:0)

TL; DR:不,你不能

要呈现UIView,您必须继承RCTViewManager并使用view方法返回您的观点:

@interface MyCoolViewManager: RCTViewManager
@end

@implementation MyCoolViewManager

RCT_EXPORT_MODULE()

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

@end

有关详细信息,请参阅文档,您需要做的事情非常详细:

http://facebook.github.io/react-native/docs/native-components-ios.html