React Native在設(shè)計之初鸟辅，就考慮到了React Native提供的API,不能夠完全的覆蓋平臺對應(yīng)的所有API.因此在React Native中可以方便的調(diào)用Native的方法宪肖，Android上面對應(yīng)Java方法，IOS上對應(yīng)Object-C方法棕叫。
有的時候在處理數(shù)據(jù)庫，多線程上面谷遂，使用Native加的方便专普。
下面就以調(diào)用IOS系統(tǒng)的Alert為例，看下怎么使用JavaScript代碼調(diào)用Object-C的Native方法的固该。
RCTBridgeModule
RCT是ReaCT的縮寫锅减，React Native中Object-C相關(guān)的命名均以RCT開頭糖儡。
RCTBridgeModule是定義好的protocol伐坏，實現(xiàn)該協(xié)議的類，會自動注冊到Object-C對應(yīng)的Bridge中握联。
Object-C Bridge上層負(fù)責(zé)與Object-C通信桦沉，下層負(fù)責(zé)和JavaScript Bridge通信，而JavaScript Bridge負(fù)責(zé)和JavaScript通信.
這樣,通過Object-C Bridge和JavaScript Bridge就可以實現(xiàn)JavaScript和Object-C的相互調(diào)用金闽。
先要定義一個類：RNIOSAlert用來現(xiàn)實RCTBridgeModule協(xié)議纯露。
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "RCTBridgeModule.h"
@interface RNIOSAlert : NSObject<RCTBridgeModule>
@end
RCT_EXPORT_MODULE
所有實現(xiàn)RCTBridgeModule的類都必須顯示的include宏命令:RCT_EXPORT_MODULE()。
RCT_EXPORT_MODULE的作用是:自動注冊一個Module,當(dāng)Object-c Bridge加載的時候代芜。這個Module可以在JavaScript Bridge中調(diào)用埠褪。
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的名稱，如果不設(shè)置名稱的話默認(rèn)就使用類名作為Modul的名稱挤庇。
引入RCT_EXPORT_MODULE:
#import "RNIOSAlert.h"
@implementation RNIOSAlert
RCT_EXPORT_MODULE();
@end
RCT_EXPORT_METHOD
RCT_EXPORT_METHOD是用來定義被JavaScript調(diào)用的方法的宏钞速。RCT_EXTERN_METHOD調(diào)用了宏RCT_EXTERN_REMAP_METHOD,最終調(diào)用宏RCT_EXTERN_REMAP_METHOD。
RCT_EXTERN_REMAP_METHOD的代碼實現(xiàn)：
#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調(diào)用的方法渴语。
RCT_EXPORT_MODULE的使用，需要寫入方法名,參數(shù)以及完整的實現(xiàn)昆咽，例如:
#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:@"關(guān)閉" otherButtonTitles:nil, nil];
[alertView show];
}
@end
JavaScript調(diào)用
在JavaScript中調(diào)用Object-C定義的方法驾凶，需要先導(dǎo)入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>
);
}
}
成功調(diào)用Alert：
參數(shù)
RCT_EXPORT_METHOD支持需要JSON所支持的數(shù)據(jù)類型牙甫，JavaScript中的參數(shù)與Object-C的參數(shù)的對應(yīng)關(guān)系。
- 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,他的作用可以把傳入的參數(shù)轉(zhuǎn)換為需要的數(shù)據(jù)類型调违。
比如我們在Object-C中定義一個方法窟哺，該方法接收NSDictionary參數(shù)：
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:@"關(guān)閉" otherButtonTitles:nil, nil];
[alertView show];
}
這里使用RCTConvert直接把NSDictionary中的值轉(zhuǎn)換為NSDate.
在JavaScript中的調(diào)用showTime方法:
......
<TouchableOpacity onPress={()=> {
var date = new Date();
RNIOSAlert.showTime(
{
time: date.getTime()
}
)
}}>
<Text>Time</Text>
</TouchableOpacity>
......
