React Nativeと原生iOS項目交信

3143 ワード

  • 原生iOS項目において
  • は、NSObjectを継承するクラス
  • を作成する.
  • クラスのうち、ヘッダファイルRCTB_ridgeModule.h
  • を導入する.
  • 契約を締結しました.
  • .mファイル導入ヘッドファイルRCTEvent Displatch.h
  • .mファイル方法導出RCT_EXPORT_MODULE()
  • jsが原生方法RCT_を呼び出します.EXPORT_METHOD()
  • 元の方法はjs
  • を呼び出します.
  • .hファイル
  • #import 
    #import "RCTBridgeModule.h"//     
    @interface RNModule : NSObject//    
    @end
    
  • .mファイル
  • #import "RNModule.h"
    #import "RCTEventDispatcher.h"
    @implementation RNModule
    //  
    RCT_EXPORT_MODULE()
    
  • js呼び出し元方法
  • //js      
    RCT_EXPORT_METHOD(RNTest:(NSString *)name age:(int)age){
        NSLog(@"RN        name:%@ ,age%d",name,age);
    }
    //   Javascript         void。React native         。      Javascript,               
    RCT_EXPORT_METHOD(jsCallback:(NSString *)jsString callBack:(RCTResponseSenderBlock)callback){
        NSLog(@"   jsCallback   %@",jsString);
         NSArray *events = [[NSArray alloc] initWithObjects:@"    ",@"    ", nil];
        NSString *str  = @"hhhhhhah           ";
        callback(@[[NSNull null],str]);  
    }
    
  • oc呼び出しjs
  • //oc  js      js->oc->js
    @synthesize bridge = _bridge;
    
    RCT_EXPORT_METHOD(OCTest){
        [self ocCallJs];
    }
    
    - (void)ocCallJs{
        
        NSDictionary *dict = @{@"name":@"lish-  oc  rn   ",@"age":@25};
        [self.bridge.eventDispatcher sendAppEventWithName:@"ocCallJs" body:dict];
    
    }
    @end
    
  • jsファイル
  • - import {
        NativeModules,
    } from 'react-native';
    //js            RNTest
    var RN = NativeModules.RNModule;
    //RNModule             
    
    //OC  js
    var Js = NativeAppEventEmitter.addListener(
        'ocCallJs',
        (para)=> Alert.alert(' oc  ','    :
    name:'+para.name+'
    age:'+para.age) ); export default class test extends Component { // constructor(props) { super(props); // this.state = { }; } componentWillUnmount() { Js.remove(); } render() { return ( { RN.OCTest() }}> OC RN { RN.RNTest('Lishuang',25); }}> RN OC { RN.jsCallback('Lishuang',(error,callBack)=>{ if(error){ Alert.alert({error}) }else{ //Alert.alert('J2O ', ' :
    [0]:'+callBack[0]+'
    [1]:'+callBack[1]) Alert.alert(callBack) } }); }}> RN OC -
    ); } }
    ダウンロード