美文网首页
ReactNative调用iOS方法

ReactNative调用iOS方法

作者: 米开朗骑騾 | 来源:发表于2019-11-07 22:25 被阅读0次

    https://blog.csdn.net/zww1984774346/article/details/71167775
    方法一:
    带.h

    .h
    #import <Foundation/Foundation.h>
    #import <React/RCTBridge.h>
    @interface RNOrderiOS : NSObject<RCTBridgeModule>
    
    @end
    .m
    #import "RNOrderiOS.h"
    @implementation RNOrderiOS
    RCT_EXPORT_MODULE();
    RCT_EXPORT_METHOD(doSomething:(NSString *)testStr){
        NSLog(@"----%@----",testStr);
    }
    @end
    

    原生模块:

    一个.m
    #import <Foundation/Foundation.h>
    #import <React/RCTBridge.h>
    
    @interface RedirectModule : NSObject<RCTBridgeModule>
    
    @end
    
    @implementation RedirectModule
    
    RCT_EXPORT_MODULE();
    RCT_EXPORT_METHOD(startActivityFromJS:(NSString *)str1 ReceiveStr:(NSString *)str2){
      NSLog(@"----%@---%@-",str1,str2);
    }
    
    @end
    

    RN模块:

    //引入原生类
    const RouteMapViewManager = require('react-native').NativeModules.RedirectModule;
    
    //调用
    startAndStop(type) {
            RouteMapViewManager. startActivityFromJS('22','222') 
        }
    
    2.
    NativeModules.RedirectModule.startActivityFromJS('2222','222')
    
    

    方法二:
    原生模块:

    @implementation RouteMapViewManager
    
    RCT_EXPORT_MODULE()
    RCT_EXPORT_METHOD(startAndStop:(nonnull NSNumber *)reactTag type:(NSString *)type) {
    //前半部固定写法
       NSLog(@"------------2323423--%@----------",type);
    }
    @end
    

    RN模块:

    //引入原生控件
    let RCTRouteMapView = requireNativeComponent('RouteMapView', RouteMapView);
    
    class RouteMapView extends Component {
    
    //显示原生控件
        render() {
            return <RCTRouteMapView ref="gaodeMap" {...this.props}/>
        }
    
    /**
         * RN向原生控件发送消息
         * @param name
         * @param args
         * @returns {*}
         */
        runCommand(name, args = []) {
            return Platform.select({
                android: () => UIManager.dispatchViewManagerCommand(
                    this.getHandle(),
                    UIManager.RouteMapView.Commands[name],
                    args
                ),
                // ios: () => LottieViewManager[name](this.getHandle(), ...args),
                ios: () => UIManager.dispatchViewManagerCommand(
                    this.getHandle(),
                    UIManager.RouteMapView.Commands[name],
                    args
                )
            })();
        }
    
       getHandle() {
            return findNodeHandle(this.refs.gaodeMap);
        }
    
        startAndStop(type) {
    //ios 需加标识 ‘startAndStop’,传的需以数组形式传 [type]
            Platform.OS === 'ios' ? this.runCommand('startAndStop',[type]) : this.runCommand(type);
        }
    
    

    带有回调

    //回调
    //RCTResponseSenderBlock
    //RCTResponseSenderBlock只接受一个参数,为数组,把需要回调的参数加入到数组中,回调回去
    RCT_EXPORT_METHOD(calliOSActionWithCallBack:(RCTResponseSenderBlock)callBlock){
      NSString *string=@"hello";
    
      NSArray *array=@[@"RN",@"and",@"iOS"];
    
      NSString *end=@"goodbay";
    
      //更多参数放到数组中进行回调
      callBlock(@[string,array,end]);
    }
    
    RN
    . calliOSActionWithCallBack((string,array,end) => {
    })
    

    小结:之前比较坑的是 使用dispatchViewManagerCommand方法时 怎么都报错,报传的args里多个3,0,数组越界...找不到原因,在别的工程里写就可以了...

    相关文章

      网友评论

          本文标题:ReactNative调用iOS方法

          本文链接:https://www.haomeiwen.com/subject/pvntgftx.html