React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。起源于faceBbook内部，2013开源。

React Native 组件就是对原生视图的封装，因此使用 React Native 编写的应用外观、感觉和性能与其他任何原生应用一样。

iOS必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。

可以参考RN官网：https://reactnative.cn/docs/environment-setup

比如react-native init RNInteractionWithiOS 创建一个应用之后就会自动在 RNInteractionWithiOS->ios->RNInteractionWithiOS->AppDelegate.m中生成打开一个React Native页面的代码。核心代码如下：

  1. NSURL *jsCodeLocation;
  3.  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  5.  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
  6.                                                      moduleName:@"RNInteractionWithiOS"
  7.                                               initialProperties:nil
  8.                                                   launchOptions:launchOptions];
  9.  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  11.  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  12.  UIViewController *rootViewController = [UIViewController new];
  13.  rootViewController.view = rootView;
  14.  self.window.rootViewController = rootViewController;
  15.  [self.window makeKeyAndVisible];

RN核心代码

  1. componentWillMount() {
  2.       DeviceEventEmitter.addListener('EventInit', (msg) => {
  3.           let receive = "EventInit: " + msg;
  4.           console.log(receive);
  5.           this.setState({notice: receive});
  6.       });
  8.       DeviceEventEmitter.addListener('EventLogin', (msg) => {
  9.           let receive = "EventLogin: " + msg;
  10.           console.log(receive);
  11.           this.setState({notice: receive});
  12.       });
  13.   }
iOS核心代码：

  • 创建的iOS交互类要引用#import<React/RCTBridgeModule.h> 和#import <React/RCTEventEmitter.h>,继承RCTEventEmitter，并遵守RCTBridgeModule
  • 很关键的：交互类要设置bridge为当前RCTRootView的bridge，[[ReactInteraction shareInstance] setValue:rnView.bridge forKey:@"bridge"];

ReactInteraction.h文件

  1. #import <Foundation/Foundation.h>
  2. #import <React/RCTBridgeModule.h>
  3. #import <React/RCTEventEmitter.h>
  4.  
  5. @interface ReactInteraction : RCTEventEmitter <RCTBridgeModule>
  6. + (instancetype)shareInstance;
  7. - (void)init:(NSString *)parameter;
  8. - (void)login;
  9. @end

ReactInteraction.m文件

  1. #import "ReactInteraction.h"
  2.  
  3. #define INIT @"EventInit"
  4. #define LOGIN @"EventLogin"
  5.  
  6. @implementation ReactInteraction
  7. static ReactInteraction *instance = nil;
  9. RCT_EXPORT_MODULE();
  10. + (instancetype)shareInstance {
  11.   static dispatch_once_t onceToken;
  12.   dispatch_once(&onceToken, ^{
  13.     instance = [[self alloc] init];
  14.   });
  15.   return instance;
  16. }
  18. - (NSArray<NSString *> *)supportedEvents
  19. {
  20.   return @[INIT,LOGIN];
  21. }
  23. RCT_EXPORT_METHOD(init:(NSString *)msg) {
  24.   [self.bridge enqueueJSCall:@"RCTDeviceEventEmitter"
  25.                       method:@"emit"
  26.                         args:@[INIT, msg]
  27.                   completion:NULL];
  28. }
  30. RCT_EXPORT_METHOD(login) {
  31.   [self.bridge enqueueJSCall:@"RCTDeviceEventEmitter"
  32.                       method:@"emit"
  33.                         args:@[LOGIN]
  34.                   completion:NULL];
  35. }
  37. @end

RN核心代码：

  1. import {NativeModules} from 'react-native';
  2. const NativeInteraction = NativeModules.NativeInteraction;
  • OS核心代码：
    • 注意点1：RCT_EXPORT_METHOD与RCT_REMAP_METHOD宏定义的使用区别（个人总结，有不对请指正）
      • RCT_EXPORT_METHOD：用于仅有一个参数或回调
      • RCT_REMAP_METHOD：用于有多个参数或（和）多个回调
        （了解更多可以看RN宏定义源码1，下面贴出关键两句)
    • 注意点2：iOS回调方式有两种
      • callback(@[jsonString]); ((RCTPromiseResolveBlock)resolver)
      • Promise方式：_resolveBlock(@[jsonString]); ((RCTResponseSenderBlock)callback) （了解更多看RN源码2）

源码1：

  1. #define RCT_REMAP_METHOD(js_name, method) \
  2.   _RCT_EXTERN_REMAP_METHOD(js_name, method, NO) \
  3.   - (void)method RCT_DYNAMIC;
  5. #define RCT_EXPORT_METHOD(method) \
  6.   RCT_REMAP_METHOD(, method)

源码2

  1. RCT_EXPORT_METHOD(navigate:(NSString*)page parameter:(NSDictionary *)dic callback:(RCTResponseSenderBlock )callback){
  2.     //主线程处理UI事件
  3.   dispatch_async(dispatch_get_main_queue(), ^{
  4.       //跳转类型
  5.     if ([page isEqualToString:@"ShoppingMall"]){
  6.           //九九老年商城
  7.           WeiMengWebVC *weiMengWebVC = [[WeiMengWebVC alloc] init];
  8.           [dic setValue:@"1" forKey:@"type"];
  9.           weiMengWebVC.dic = dic;
  10.           [[UIViewController topViewController].navigationController pushViewController:weiMengWebVC animated:YES];
  11.       }
  12. }
  1. typedef void (^RCTResponseSenderBlock)(NSArray *response);
  2. typedef void (^RCTResponseErrorBlock)(NSError *error);
  3. typedef void (^RCTPromiseResolveBlock)(id result);
  4. typedef void (^RCTPromiseRejectBlock)(NSString *code, NSString *message, NSError *error
版权声明：本文为向日葵原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/laolitou-ping/p/16068295.html