React Native之原生與RN的調用與傳遞

一:原生傳遞一個VIEW給RN顯示

XCODE中新建HKViewOne.h

#import <React/RCTViewManager.h>
@interface HKViewOne : RCTViewManager
@end

新建HKViewOne.m

#import "HKViewOne.h"
@implementation HKViewOne

RCT_EXPORT_MODULE()
//返回你想要显示的那个View
-(UIView *)view{
  UIView * v = [[UIView alloc]init];
...
  return v;
}
@end

//--------
在react native 的JS文件中

var {requireNativeComponent } = require('react-native');
//第一个参数! 名字就是iOS原生的类名!! 那么如果有Manager 那么请去掉!!
//第二個參數:保持和類名一致
var HKView = requireNativeComponent('HKViewOne',IOSView);

export default class IOSView extends Component {
    render() {
        return (
            <HKView
                style={{flex:1}}//必須要寫View的大小,否則View上面的點擊事件無效!!!
            />
        );
    }
}

二:原生提供一個方法讓RN調用並傳遞參數給原生

原生的.m文件中

@implementation HKViewOne
//從RN傳遞一個title值過來並保存起來
RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(changeTitle:(NSString *)title){
    self.title = title;
}

js文件中

import {NativeModules} from 'react-native';
var HKViewOne = NativeModules.HKViewOne;
HKViewOne.changeTitle('我来了!!!');