摘要:是的縮寫,中相關的命名均以開頭。引入是用來定義被調用的方法的宏。的代碼實現它的作用是在定義的下面,定義一個可以被調用的方法。比如我們在中定義一個方法,該方法接收參數關閉這里使用直接把中的值轉換為在中的調用方法源代碼地址
React Native在設計之初,就考慮到了React Native提供的API,不能夠完全的覆蓋平臺對應的所有API.因此在React Native中可以方便的調用Native的方法,Android上面對應Java方法,IOS上對應Object-C方法。
有的時候在處理數據庫,多線程上面,使用Native加的方便。
下面就以調用IOS系統的Alert為例,看下怎么使用JavaScript代碼調用Object-C的Native方法的。
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協議。
#importRCT_EXPORT_MODULE#import #import "RCTBridgeModule.h" @interface RNIOSAlert : NSObject @end
所有實現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(); @endRCT_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*)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]; } @endJavaScript調用
在JavaScript中調用Object-C定義的方法,需要先導入NativeModules,再使用RNIOSAlert:
完整代碼如下:
import {? ? ? ? StyleSheet, ? ? Text, ? ? View, ? ? NativeModules, ? ? TouchableOpacity } from "react-native"; var RNIOSAlert = NativeModules.RNIOSAlert; class RNIos extends Component { ? ? render() { ? ? ? ? return ( ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ); ? ? } }RNIOSAlert.show("from react native ")}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Alert ? ? ? ? ? ? ? ?
成功調用Alert:
參數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方法:
......{ ? ? ? ? ? ? ? ? ? ? var date = new Date(); ? ? ? ? ? ? ? ? ? ? RNIOSAlert.showTime( ? ? ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? ? ? ? time: date.getTime() ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ) ? ? ? ? ? ? ? ? }}> ? ? ? ? ? ? ? ? ? ? ......Time ? ? ? ? ? ? ? ?
源代碼地址:https://github.com/jjz/react-...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91649.html
摘要:但阿里百川并沒有提供直接獲取數據的方法,所以選擇時一定要慎重。 React-native 使用native第三方sdk ios(以阿里百川用戶反饋為例) 首先安裝cocopods(類似于npm,ios開發的依賴管理工具,教程:http://www.code4app.com/artic... 在ios根目錄下創建Podfile文件,添加如下代碼(使用的是百川feedback1.1.1版...
摘要:在版本上,安卓系統上的渲染就有鋸齒,后來我們不分效果是使用圖片實現的,汗啊第三方組件不全。搖一搖問題的解決在我們使用了等狀態管理時,熱更新不會更新這些代碼,而頻繁搖一搖實在是太累了。此時可以使用此時相當于虛擬了一個搖一搖事件。 公司本年度有App任務,陸陸續續用RN開發了兩個應用。一款是涉及儀器控制的平板項目,另一款是客戶端的App。下文談談使用RN開發的部分認知(其實只是隨便扯一扯,...
閱讀 2830·2021-09-10 10:50
閱讀 2192·2019-08-29 16:06
閱讀 3196·2019-08-29 11:02
閱讀 1093·2019-08-26 14:04
閱讀 2803·2019-08-26 13:24
閱讀 2301·2019-08-26 12:16
閱讀 550·2019-08-26 10:29
閱讀 3094·2019-08-23 18:33