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()<SDCycleScrollViewDelegate>
@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 (
           <ScrollView style = {{marginTop:64}}>
               <View>
                   <TextScrollView style={styles.scrollViewStyle}
                                   autoScrollTimeInterval = {2}
                                   imageURLStringsGroup = {bannerImgs}
                                   pageControlAliment = {TestScrollViewConsts.SDCycleScrollViewPageContolAliment.right}
                                   onClickBanner={(e) => {
                                       console.log('test' + e.nativeEvent.value);
                                       this.setState({bannerNum:e.nativeEvent.value});
                                   }}
                   />
                   <Text style={{fontSize: 15, margin: 10, textAlign:'center'}}>
                       点击banner -> {this.state.bannerNum}
                   </Text>
               </View>
           </ScrollView>
       );
   }

• 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 <RCTScrollView {...this.props}/>
   }
}
TextScrollView.propTypes = {
   //属性类型
   autoScrollTimeInterval:PropTypes.number,
   imageURLStringGroup:PropTypes.array,
   autoScroll:PropTypes.bool,
}
module.exports = TextScrollView;

demo下载