react-native挪用ios native要领

React Native在设想之初,就斟酌到了React Native供应的API,不能够完全的掩盖平台对应的一切API.因此在React Native中能够轻易的挪用Native的要领,Android上面对应Java要领,IOS上对应Object-C要领。
有的时刻在处置惩罚数据库,多线程上面,运用Native加的轻易。
下面就以挪用IOS体系的Alert为例,看下怎样运用JavaScript代码挪用Object-C的Native要领的。

RCTBridgeModule

RCT是ReaCT的缩写,React Native中Object-C相干的定名均以RCT开首。
RCTBridgeModule是定义好的protocol,完成该协定的类,会自动注册到Object-C对应的Bridge中。
Object-C Bridge上层担任与Object-C通讯,基层担任和JavaScript Bridge通讯,而JavaScript Bridge担任和JavaScript通讯.
如许,经由过程Object-C Bridge和JavaScript Bridge就能够完成JavaScript和Object-C的互相挪用。
先要定义一个类:RNIOSAlert用来实际RCTBridgeModule协定。

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "RCTBridgeModule.h"

@interface RNIOSAlert : NSObject<RCTBridgeModule>

@end

RCT_EXPORT_MODULE

一切完成RCTBridgeModule的类都必须显现的include宏命令:RCT_EXPORT_MODULE()
RCT_EXPORT_MODULE的作用是:自动注册一个Module,当Object-c Bridge加载的时刻。这个Module能够在JavaScript Bridge中挪用。
RCT_EXPORT_MODULE宏命令的定义:

#define RCT_EXPORT_MODULE(js_name) \
RCT_EXTERN void RCTRegisterModule(Class); \
+ (NSString *)moduleName { return @#js_name; } \
+ (void)load { RCTRegisterModule(self); }

能够看到RCT_EXPORT_MODULE吸收字符串作为其Module的称号,假如不设置称号的话默许就运用类名作为Modul的称号。
引入RCT_EXPORT_MODULE:


#import "RNIOSAlert.h"

@implementation RNIOSAlert

RCT_EXPORT_MODULE();

@end

RCT_EXPORT_METHOD

RCT_EXPORT_METHOD是用来定义被JavaScript挪用的要领的宏。RCT_EXTERN_METHOD挪用了宏RCT_EXTERN_REMAP_METHOD,终究挪用宏RCT_EXTERN_REMAP_METHOD
RCT_EXTERN_REMAP_METHOD的代码完成:

#define RCT_EXTERN_REMAP_METHOD(js_name, method) \
  + (NSArray<NSString *> *)RCT_CONCAT(__rct_export__, \
    RCT_CONCAT(js_name, RCT_CONCAT(__LINE__, __COUNTER__))) { \
    return @[@#js_name, @#method]; \
  }

它的作用是在RCT_EXPORT_MODULE定义的Module下面,定义一个能够被JavaScript挪用的要领。
RCT_EXPORT_MODULE的运用,须要写入要领名,参数以及完全的完成,比方:

#import "RNIOSAlert.h"

@implementation RNIOSAlert

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(show:(NSString *)msg){

  UIAlertView * alertView=[[UIAlertView alloc] initWithTitle:@"react-native" message:msg delegate:nil cancelButtonTitle:@"封闭" otherButtonTitles:nil, nil];
    [alertView show];

}
@end

JavaScript挪用

在JavaScript中挪用Object-C定义的要领,须要先导入NativeModules,再运用RNIOSAlert
完全代码以下:

import {   
    StyleSheet,
    Text,
    View,
    NativeModules,
    TouchableOpacity
} from "react-native";

var RNIOSAlert = NativeModules.RNIOSAlert;

class RNIos extends Component {
    render() {

        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={()=>RNIOSAlert.show('from react native ')}>
                    <Text>Alert</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

胜利挪用Alert

《react-native挪用ios native要领》

参数

RCT_EXPORT_METHOD支撑须要JSON所支撑的数据类型,JavaScript中的参数与Object-C的参数的对应关联。

  • string -> NSString

  • number -> (NSInteger,float,double,CGFloat,NSNumber)

  • boolean -> (BOOL,NSNumber)

  • array -> NSArray

  • object -> NSDictionary

  • function -> RCTResponseSenderBlock

别的React Navite还供应了RCTConvert,概况的代码能够参照 https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.h,他的作用能够把传入的参数转换为须要的数据类型。
比方我们在Object-C中定义一个要领,该要领吸收NSDictionary参数:


RCT_EXPORT_METHOD(showTime:(NSDictionary*)dict){
  NSDate * date =[RCTConvert NSDate:dict[@"time"]];
  UIAlertView * alertView=[[UIAlertView alloc] initWithTitle:@"react-native" message:[date description] delegate:nil cancelButtonTitle:@"封闭" otherButtonTitles:nil, nil];
  [alertView show];  
}

这里运用RCTConvert直接把NSDictionary中的值转换为NSDate.
在JavaScript中的挪用showTime要领:

......
<TouchableOpacity onPress={()=> {
                    var date = new Date();
                    RNIOSAlert.showTime(
                        {
                            time: date.getTime()
                        }
                    )
                }}>
                    <Text>Time</Text>
                </TouchableOpacity>
......

源代码地点:https://github.com/jjz/react-…

    原文作者:姜家志
    原文地址: https://segmentfault.com/a/1190000006207887
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞