RN调用iOS组件

  • 原生项目中

  • 创建一个继承原生组件的类 -> TestScrollView

    • 导入 UIView+React.h(对原生视图进行扩展) 和 RCTComponent.h
    • 如果有点击事件 -> 属性一般以on开头命名
    @property (nonatomic , copy) RCTBubblingEventBlock onClickBanner
    
  • 创建一个继承RCTViewManager的类 -> TestScrollViewManager

    • 导入TestScrollView.h 第三方组件
    • RCTBridge.h 进行通信文件
    • RCTEventDispatcher.h 事件派发
    • 如有协议签订协议<>
#import "TestScrollViewManager.h"
#import "TestScrollView.h"//第三方组件
#import "RCTBridge.h" //进行通信文件
#import "RCTEventDispatcher.h" //事件派发
@interface TestScrollViewManager()
@property (nonatomic , strong) TestScrollView *testScrollView;
@end
  • 重写- (UIView *)view

  - (UIView *)view{
    //实际组件的大小位置由js控制
    _testScrollView = [TestScrollView cycleScrollViewWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width/2+20, [UIScreen mainScreen].bounds.size.width/2+20)delegate:self placeholderImage:nil];
    //  初始化时将delegate指向了self
    _testScrollView.pageControlStyle = SDCycleScrollViewPageContolStyleClassic;
    _testScrollView.pageControlAliment = SDCycleScrollViewPageContolAlimentCenter;
    return _testScrollView;   
}
  • 类导出

RCT_EXPORT_MODULE()
  • 属性导出

    • 此处导出的属性名字一定要跟原生组件的属性名字一样这样js才能给原生赋值
    • RCT_EXPORT_VIEW_PROPERTY()
RCT_EXPORT_VIEW_PROPERTY(autoScroll, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onClickBanner, RCTBubblingEventBlock)
  • 导出枚举常量,给js定义样式用

    • constantsToExport
- (NSDictionary *)constantsToExport
{
    return @{
             @"SDCycleScrollViewPageContolAliment": @{
                     @"right": @(SDCycleScrollViewPageContolAlimentRight),
                     @"center": @(SDCycleScrollViewPageContolAlimentCenter)
                     }
             };
}

  • 事件导出

    • 在协议里或合适的地方导出事件
- (void)cycleScrollView:(TestScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index
{
   
    //  导出事件
    cycleScrollView.onClickBanner(@{@"target": cycleScrollView.reactTag,
                                    @"value": [NSNumber numberWithInteger:index+1]});
}

  • js文件

  • 引用组件

//引用组件
var TextScrollView = require('./TextScrollView');
  • 引用定义的常量

var TestScrollViewConsts = require('react-native').UIManager.TestScrollView.Constants;
  • 创建组件

 render() {

       return (
           
               
                    {
                                       console.log('test' + e.nativeEvent.value);
                                       this.setState({bannerNum:e.nativeEvent.value});
                                   }}
                   />
                   
                       点击banner -> {this.state.bannerNum}
                   
               
           
       );
   }
  • js中TextScrollView组件

import React,{Component,PropTypes} from 'react';
import {
    requireNativeComponent
}from 'react-native'
  • 注意:

a. RCTScrollView 对应下方创建的名字
b. 'TestScrollView' 对应ios原生组件文件名字
c. 对应本文件 class 创建及导出的名字
//requireNativeComponent
var RCTScrollView = requireNativeComponent('TestScrollView',TextScrollView);
export default class TextScrollView extends Component{
   render(){
       return 
   }
}
TextScrollView.propTypes = {
   //属性类型
   autoScrollTimeInterval:PropTypes.number,
   imageURLStringGroup:PropTypes.array,
   autoScroll:PropTypes.bool,
}
module.exports = TextScrollView;

demo下载

你可能感兴趣的:(RN调用iOS组件)