iOS 原生项目集成 React-Native 中遇到的问题(

没有开场闲话, 直接开始啦

一. 原生项目集成 React-Native, JS 中调用iOS原生开发组件遇到的问题:

在进行项目集成 React-Native 的过程中, 会遇到很多界面, 比较复杂, 需要使用原生组件实现, 而在 React-Native 中写逻辑, 所以这个时候我们就需要在 JS 文件中使用调用原生的组件, 从文档中我们发现, 关于原生有两种集成方法: 1. Native Module(原生组件, 以下简称 NM) 2. Native UI Component (原生 UI 组件, 以下简称 NUC)

就他们之间的区别, 首先 NM 是之间实现RCTBridgeModule协议, 而 NUC 是继承自RCTViewManager, RCTViewManager同样实现了RCTBridgeModule协议, 所有这两者应该没有区别, 导出组件都是通过 RCT_EXPORT_MODULE('指定导出组件的名称,默认类名');宏导出, 导出属性通过RCT_EXPORT_MODULE(属性名称, 属性类型, viewClass(Native 组件的类型));宏 导出方法通过 RCT_EXPORT_METHOD()在 NM 中导出方法直接在()中写原生方法即可如下:

// 这是一个 NM 中的导出方法, 用于在 JS 令 Native push到下一界面
RCT_EXPORT_METHOD(pushNative:(NSString *)storyName controllerId:(NSString *)controllerId params:(NSDictionary *)json)
{
    dispatch_async(dispatch_get_main_queue(), ^{
        UIStoryboard *secondStoryBoard = [UIStoryboard storyboardWithName:storyName bundle:nil];
        UIViewController *suitViewControllers = [secondStoryBoard instantiateViewControllerWithIdentifier:controllerId];
        [suitViewControllers setHidesBottomBarWhenPushed:YES];
        [self setproperties:suitViewControllers andParams:json];
        [(UINavigationController *)[WN_GlobalUtil getCurrentNavigationController] pushViewController:suitViewControllers animated:YES];
    });
}

// JS 中使用, 将箭头方法声明为属性, 自动绑定 this 为 class
avatorHandle = (event: Event) => {
    console.log('event');
    ReactTools.pushNative('UserCenter','Usercenters',{});
};

这里我要说的是, 我觉得 NM 适合导出原生逻辑而导出原生 View 时应该使用 NUM
所以我要将原生的一个 HeaderView 导出到 RN 中使用

假设我们的 HeaderView 在项目总是这样定义的

 #import <UIKit/UIKit.h>
@class MineHeaderView;
@protocol MineHeaderViewDelegate <NSObject>
// 点击头像触发的操作
- (void)mineHeaderViewDidClickAvatar:(MineHeaderView *)mineHeaderView;
// 另一项操作
- (void)clickProducting:(MineHeaderView *)mineHeaderView;

@end

@interface MineHeaderView : UIView
@property (nonatomic, weak) id<MineHeaderViewDelegate> delegate;
// 从 xib 中加载视图的工厂方法
+ (instancetype)mineHeaderView;
// 显示是刷新信息
- (void)show;
@end

首先创建 RCTxxxManager 类, 在这里是 RCTMineHeaderViewManager, RN 自动去除前缀 RCT, 后缀 Manager

#import "RCTViewManager.h"

@interface RCTMineHeaderViewManager : RCTViewManager
@end

#import "RCTMineHeaderViewManager.h"
#import "RCTEventDispatcher.h"
#import "MineHeaderView.h"
#import "RCTUIManager.h"
#import "RCTBridge.h"
#import "UIView+React.h"

@interface RCTMineHeaderViewManager () <MineHeaderViewDelegate>

@end

@implementation RCTMineHeaderViewManager
// 导出组件
RCT_EXPORT_MODULE();
// 1.
RCT_EXPORT_METHOD(showHeaderView:(nonnull NSNumber *)reactTag) {
    // 2.
    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
        // 3.
        MineHeaderView *view = (MineHeaderView *) viewRegistry[reactTag];
        if (!view || ![view isKindOfClass:[MineHeaderView class]]) {
            RCTLogError(@"Cannot find Component with tag #%@", reactTag);
            return;
        }
        // 4
        [view show];
    }];
}

- (UIView *)view {
    // 指定关联的 View
    MineHeaderView *mineHeaderView = [MineHeaderView mineHeaderView];
    mineHeaderView.delegate = self;
    return mineHeaderView;
}

// 绑定事件
- (void)mineHeaderViewDidClickAvatar:(MineHeaderView *)mineHeaderView {
    // 5.
    [self.bridge.eventDispatcher sendInputEventWithName:@"handleAvatorEvent"
                                                   body:@{
                                                          @"target": mineHeaderView.reactTag
                                                          }];
}
// 绑定事件
- (void)clickProducting:(MineHeaderView *)mineHeaderView {
    // 6.
    [self.bridge.eventDispatcher sendInputEventWithName:@"doingProductProgress"
                                                   body:@{
                                                          @"target": mineHeaderView.reactTag
                                                          
                                                        }];
    
}

// 6.
- (NSArray<NSString *> *)customBubblingEventTypes {
    return @[
             @"handleAvatorEvent",
             @"doingProductProgress"
             ];
}

@end

1. 指定导出方法, 注意 reactTag参数, 在 RN 中, 是通过一个 reactTag 的参数将原生组件与 JS 中的调用连接, reactTag 是 JS 中传递过来的, 注意添加 nonull 关键字,否则 debug 模式会报 Android不兼容错误, 注意; 一开始我用的__nonull, 不行, 查看 OC 新特性, 在变量时使用__nonull, 应该没错, nonull 在 property 使用, 不知道此处为什么不行, 如果遇到的请指教, 谢谢

2. 导入 RCTBridge.h, 通过 uiManager, 在 addUIBlock 中添加需要实现的逻辑, 我们可以使用 RCTUIManager 维护的 ViewRegistry 通过 reactTag 获得调用方法的组件

3. 我们可以使用 RCTUIManager 维护的 ViewRegistry 通过 reactTag 获得调用方法的组件

4. 获得原生组件后, 调用原生的方法

5. 因为我们在 HeaderView 要通过代理将点击头像的事件传递, 所以我们同样将点击事件传入到 JS 中处理, 在传递事件时通过 eventDispatch(事件分发) 处理, 在 RCTViewManager 中默认处理了 press, change, focus, blur, submitEditing.. 事件, 在 JS 中调用时只需要添加 on 前缀即可监听例如 onPress, onChange,.. 就默认指定了事件, 如果想要自定义事件名称, 请重写 customBubblingEventTypes, 返回数组, 在这个例子中我们重定义了handleAvatorEvent(点击头像),doingProductProgress(物品进度) 两个事件名称

6. 通过 sendInputEventWithName:body: 对事件与 JS 进行绑定, 第一个参数为事件名称, 第二个参数为一个字典, 这个字典中一定要包含一个 key-value @"target": reactTag, reactTag 是在 UIView+React.h 分类中(默认所有的 View都有 reactTag 属性)

JS 中调用:

// MineHeaderView.js

'use strict';
import React,{
    ListView,
    Text,
    View,
    Image,
    TouchableHighlight,
    NativeModules,
    Platform
} from 'react-native';
const RCT_UI_REF = 'MineHeaderView';
//
const { requireNativeComponent } = React;
// Native Modules
const ReactModules = React.NativeModules;
// MineHeaderView Native UI Component
const MineHeaderViewManager = ReactModules.MineHeaderViewManager;
// Native Modules
const ReactTools = ReactModules.WN_ReactTool;

class MineHeaderView extends React.Component {
  constructor() {
    super();
  }
  // 点击头像事件
  avatorHandle = (event: Event) => {
    console.log('event');
    ReactTools.pushNative('UserCenter','Usercenters',{});
  };

  // 其他点击事件
  doingProProgress = (event: Event) => {
    ReactTools.pushNative('DoingProduct', 'DoingProduct',{});
  };
    
  // 组件加载完成后, 执行操作
  componentDidMount() {
    Platform.OS == 'ios' &&
    MineHeaderViewManager.showHeaderView(React.findNodeHandle(this.refs[RCT_UI_REF]));
  }

  render() {
    return (
      <RCTMineHeaderView
        ref = {RCT_UI_REF}          {/* 指定组件的 ref */}
        onHandleAvatorEvent = {this.avatorHandle}
        onDoingProductProgress = {this.doingProProgress}
        {...this.props}
      />
    );
  }
}

MineHeaderView.propTypes = {

};

// 第一个参数为指定的原生类名 RCTMineHeaderViewManager 类型, 默认去除 Manager, MineHeaderView关联的 JS 中组件(这个地方如果不明白参加 React-Native 文档), RCTMineHeaderView 为一个变量, 在 MineHeaderView 中使用
var RCTMineHeaderView = requireNativeComponent('RCTMineHeaderView', MineHeaderView);
// 将封装的原生组件供其他 JS 调用
module.exports = MineHeaderView;


// UserCenter.js

'use strict';

import React,{
    ListView,
    Text,
    View,
    Image,
    TouchableHighlight,
} from 'react-native';

import MineHeaderView from './MineHeader';

class UserCenter extends React.Component {

  constructor() {
    super();
  }

  render() {
    return (
      <View>
        <MineHeaderView />
      </View>
    );
  }
}

React.AppRegistry.registerComponent('UserCenter', () => UserCenter);

以上就是第一次总结, 可能存在疏误, 请指出, 共同学习进步, 谢谢, 以后会不定期更新