React Native学习------封装原生UI组件(iOS)

原生开发,发展到今天已经非常成熟完善,已有组件成千上万,极大的提高了开发效率。而React Native 在Facebook的React.js conf 2015上提出,至今一年多,组件数目肯定没得和原生的相比。
因此,在使用React Native开发App的过程中,我们可能需要调用RN没有实现的原生视图组件或第三方组件。甚至,我们可以把本地模块构造成一个React Native组件,提供给别人使用。

本文的demo基于SDCycleScrollView,即banner,因为想不到什么好的例子,所以就把在做的项目用到的SDCycleScrollView封装下,直接给js调用。

SDCycleScrollView为github开源的无限循环自动图片轮播器。
地址为:https://github.com/gsdios/SDCycleScrollView
里面会用SDWebImage,如果项目已用到SDWebImage,则建议直接把SDCycleScrollView相关代码拉进项目就OK了。

一、对原生视图进行进一步封装

参考其他人对原生视图的封装,大多都会新建一个视图,继承(或者子视图包含)原生视图,里面可能含有事件的调用(这里简单demo,就没用到)。
#import "UIView+React.h",对原生视图进行扩展(这里有个重要的属性reactTag,后面会用到,作为区分用途)。

TestScrollView.h

#import "SDCycleScrollView.h"


#import "RCTComponent.h"
#import "UIView+React.h"


@interface TestScrollView : SDCycleScrollView


@property (nonatomic, copy) RCTBubblingEventBlock onClickBanner;


@end

在封装的UIView中声明RCTBubblingEventBlock或RCTBubblingEventBlock类型的block属性,才可以被当做事件导出。(新的事件导出方式,后面会用到哦)
注意:声明block属性名称要以on开头(不确定为什么,在不做其它配置的情况下,只有on开头能成功)

TestScrollView.m

#import "TestScrollView.h"


@implementation TestScrollView


/**
 *  挺多封装原生的第三方组件都会这么写,这里还没研究透彻,就没按着去实现
- (instancetype)initWithBridge:(RCTBridge *)bridge {
    if ((self = [super initWithFrame:CGRectZero])) {
        _eventDispatcher = bridge.eventDispatcher;
        _bridge = bridge;
        ......
    }
    return self;
}
 */
@end

二、创建RCTViewManager子类来创建和管理原生视图

原生视图都需要被一个RCTViewManager的子类来创建和管理。
这些管理器在功能上有些类似“视图控制器”,但它们本质上都是单例 - React Native只会为每个管理器创建一个实例。
它们创建原生的视图并提供给RCTUIManager,RCTUIManager则会反过来委托它们在需要的时候去设置和更新视图的属性。RCTViewManager还会代理视图的所有委托,并给JavaScript发回对应的事件。

提供原生视图步骤如下:

  • 首先创建一个子类 —— 命名规范为“视图名称+Manager”. 视图名称可以加上自己的前缀,这里最好避免使用RCT前缀,除非你想给官方pull request
  • 添加RCT_EXPORT_MODULE()标记宏 —— 让模块接口暴露给JavaScript
  • 实现-(UIView *)view方法 —— 创建并返回组件视图
  • 封装属性及传递事件

下面先贴出完整的代码,然后会对属性和事件进行进一步的解说。

TestScrollViewManager.h

#import "RCTViewManager.h"


@interface TestScrollViewManager : RCTViewManager


@end

TestScrollViewManager.m

#import "TestScrollViewManager.h"
#import "TestScrollView.h"      //第三方组件的头文件


#import "RCTBridge.h"           //进行通信的头文件
#import "RCTEventDispatcher.h"  //事件派发,不导入会引起Xcode警告


@interface TestScrollViewManager() <SDCycleScrollViewDelegate>


@end


@implementation TestScrollViewManager


//  标记宏(必要)
RCT_EXPORT_MODULE()


//  事件的导出,onClickBanner对应view中扩展的属性
RCT_EXPORT_VIEW_PROPERTY(onClickBanner, RCTBubblingEventBlock)


//  通过宏RCT_EXPORT_VIEW_PROPERTY完成属性的映射和导出
RCT_EXPORT_VIEW_PROPERTY(autoScrollTimeInterval, CGFloat);


RCT_EXPORT_VIEW_PROPERTY(imageURLStringsGroup, NSArray);


RCT_EXPORT_VIEW_PROPERTY(autoScroll, BOOL);


- (UIView *)view
{
    //  实际组件的具体大小位置由js控制
    TestScrollView *testScrollView = [TestScrollView cycleScrollViewWithFrame:CGRectZero delegate:self placeholderImage:nil];
    //  初始化时将delegate指向了self
    testScrollView.pageControlStyle = SDCycleScrollViewPageContolStyleClassic;
    testScrollView.pageControlAliment = SDCycleScrollViewPageContolAlimentCenter;
    return testScrollView;
}


/**
 *  当事件导出用到 sendInputEventWithName 的方式时,会用到
- (NSArray *) customDirectEventTypes {
    return @[@"onClickBanner"];
}
 */


#pragma mark SDCycleScrollViewDelegate
/**
 *  banner点击
 */
- (void)cycleScrollView:(TestScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index
{
//    这也是导出事件的方式,不过好像是旧方法了,会有警告
//    [self.bridge.eventDispatcher sendInputEventWithName:@"onClickBanner"
//                                                   body:@{@"target": cycleScrollView.reactTag,
//                                                          @"value": [NSNumber numberWithInteger:index+1]
//                                                        }];


    if (!cycleScrollView.onClickBanner) {
        return;
    }


    NSLog(@"oc did click %li", [cycleScrollView.reactTag integerValue]);


    //  导出事件
    cycleScrollView.onClickBanner(@{@"target": cycleScrollView.reactTag,
                                    @"value": [NSNumber numberWithInteger:index+1]});
}


// 导出枚举常量,给js定义样式用
- (NSDictionary *)constantsToExport
{
    return @{
             @"SDCycleScrollViewPageContolAliment": @{
                     @"right": @(SDCycleScrollViewPageContolAlimentRight),
                     @"center": @(SDCycleScrollViewPageContolAlimentCenter)
                     }
             };
}


//  因为这个类继承RCTViewManager,实现RCTBridgeModule,因此可以使用原生模块所有特性
//  这个方法暂时没用到
RCT_EXPORT_METHOD(testResetTime:(RCTResponseSenderBlock)callback) {
    callback(@[@(234)]);
}


@end

属性

RCT_EXPORT_VIEW_PROPERTY(autoScrollTimeInterval, CGFloat);

通过宏RCT_EXPORT_VIEW_PROPERTY完成属性的映射和导出。
CGFloat为autoScrollTimeInterval的OC数据类型,转化成js则对应number。

React Native用RCTConvert来在JavaScript和原生代码之间完成类型转换。
支持的默认转换类型(部分)如下:

  • string (NSString)
  • number (NSInteger, float, double, CGFloat, NSNumber)
  • boolean (BOOL, NSNumber)
  • array (NSArray) 包含本列表中任意类型
  • map (NSDictionary) 包含string类型的键和本列表中任意类型的值

如果转换无法完成,会产生一个“红屏”的报错提示,这样你就能立即知道代码中出现了问题。如果一切进展顺利,上面这个宏就已经包含了导出属性的全部实现。

ps:更复杂的类型转换,则涉及到MKCoordinateRegion类型,本文没做应用,具体可参考官方文档例子。

事件

js和原生之间需要有事件的交互,例如,在原生实现的代理或者点击事件,js也需要实时获取到此类事件时,就需要利用事件进行交互。
事件的实现方式有以下两种:

  1. 通过sendInputEventWithName实现
    1) 实现customDirectEventTypes,返回自定义的事件名数组(on开头才有效)

    - (NSArray *) customDirectEventTypes {
     return @[@"onClickBanner"];
    }

    2) sendInputEventWithName实现事件调用(reactTag用于实例的区分)

    [self.bridge.eventDispatcher sendInputEventWithName:@"onClickBanner"
                                                   body:@{@"target": cycleScrollView.reactTag,
                                                          @"value": [NSNumber numberWithInteger:index+1]
                                                         }];
  2. 通过RCTBubblingEventBlock实现
    1) 在封装的View中添加RCTBubblingEventBlock的block属性(on开头才有效)

    @property (nonatomic, copy) RCTBubblingEventBlock onClickBanner;

    2) 在Manager类中通过宏RCT_EXPORT_VIEW_PROPERTY完成Block属性的映射和导出

    RCT_EXPORT_VIEW_PROPERTY(onClickBanner, RCTBubblingEventBlock)

    3) 实现事件调用(reactTag用于实例的区分)

    cycleScrollView.onClickBanner(@{@"target": cycleScrollView.reactTag,
                                     @"value": [NSNumber numberWithInteger:index+1]});

通过上面两种方式封装好的事件,在js中可以直接利用同名函数调用即可(后面会展示)。
不过关于事件这块,挺多都没完全弄懂,希望有大神引导引导,比如为什么只能定义on开头、如何自定义、如何事件数据源的回调等等。。。

样式

因为我们所有的视图都是UIView的子类,大部分的样式属性应该直接就可以生效。有些属性定义,需要用到枚举,则可以利用通过原生传递来的常数方式来实现,具体实现如下:

// 导出枚举常量,给js定义样式用
- (NSDictionary *)constantsToExport
{
    return @{
             @"SDCycleScrollViewPageContolAliment": @{
                     @"right": @(SDCycleScrollViewPageContolAlimentRight),
                     @"center": @(SDCycleScrollViewPageContolAlimentCenter)
                     }
             };
}

在js中调用则如下:

//  首先获取到常量
var TestScrollViewConsts = require('react-native').UIManager.TestScrollView.Constants;


//  调用

ps: 一部分组件会希望使用自己定义的默认样式,例如UIDatePicker希望自己的大小是固定的。比如大小用原生默认大小,这个例子具体可以参考官方文档的样式模块。

三、在JS中进行调用

在js中调用,可以有两种方式,一为直接作为扩展React组件调用,二为新建一个组件封装好,再进行调用。
下文用第二种方式,官方推荐,逻辑比较清晰。

1.先倒入原生组件,新建TestScrollView.js文件,在里面对TestScrollView导入,进行属性类型声明等。具体代码和解释如下:

TestScrollView.js

// TestScrollView.js


import React, { Component, PropTypes } from 'react';
import { requireNativeComponent } from 'react-native';


// requireNativeComponent 自动把这个组件提供给 "RCTScrollView"
var RCTScrollView = requireNativeComponent('TestScrollView', TestScrollView);


export default class TestScrollView extends Component {


  render() {
    return <RCTScrollView {...this.props} />;
  }


}


TestScrollView.propTypes = {
    /**
    * 属性类型,其实不写也可以,js会自动转换类型
    */
    autoScrollTimeInterval: PropTypes.number,
    imageURLStringsGroup: PropTypes.array,
    autoScroll: PropTypes.bool,


    onClickBanner: PropTypes.func
};


module.exports = TestScrollView;

2.在index.ios.js中进行调用

index.ios.js

var TestScrollView = require('./TestScrollView');


// requireNativeComponent 自动把这个组件提供给 "TestScrollView"
// 如果不新建TestScrollView.js对原生组件封装声明,则直接用这句导入即可
// var TestScrollView = requireNativeComponent('TestScrollView', null);


// 导入常量
var TestScrollViewConsts = require('react-native').UIManager.TestScrollView.Constants;


var bannerImgs = [
  'http://upload-images.jianshu.io/upload_images/2321678-ba5bf97ec3462662.png?imageMogr2/auto-orient/strip%7CimageView2/2',
  'http://upload-images.jianshu.io/upload_images/1487291-2aec9e634117c24b.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/480/q/100',
  'http://f.hiphotos.baidu.com/zhidao/pic/item/e7cd7b899e510fb37a4f2df3db33c895d1430c7b.jpg'
];


class NativeUIModule extends Component {


  constructor(props){
    super(props);
    this.state={
        bannerNum:0
    }
  }


  render() {


    return (
      <ScrollView style = {{marginTop:64}}>
      <View>
        <TestScrollView style={styles.container} 
          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控制
const styles = StyleSheet.create({
  container:{
    padding:30,
    borderColor:'#e7e7e7',
    marginTop:10,
    height:200,
  },
});


AppRegistry.registerComponent('NativeTest2', () => NativeUIModule);

若使用第一种方式,即使用下面语句进行组件的引用:

var TestScrollView = requireNativeComponent('TestScrollView', null);

则会存在的这样的问题:
虽然很方便简单,但这样并不能很好的说明这个组件的用法——用户要想知道我们的组件有哪些属性可以用,以及可以取什么样的值,他不得不一路翻到Objective-C的代码。要解决这个问题,我们可以创建一个封装组件,并且通过PropTypes来说明这个组件的接口。

注意:我们现在把requireNativeComponent的第二个参数从null变成了用于封装的组件TestScrollView。这使得React Native的底层框架可以检查原生属性和包装类的属性是否一致,来减少出现问题的可能。

关于属性、事件的调用,则是如下直接调用:

2}
          imageURLStringsGroup = {bannerImgs}
          pageControlAliment = {TestScrollViewConsts.SDCycleScrollViewPageContolAliment.right}
          onClickBanner={(e) => {
            console.log('test' + e.nativeEvent.value);
            this.setState({bannerNum:e.nativeEvent.value});
          }}
/>

关于事件,需要注意的是,事件事件默认传递的是字典数据类型,即json,在js中调用需要利用e.nativeEvent才能将字典取出,在具体调用里面的值。(这里也还未研究透彻、需要指导)

React Native 与原生代码之间混合互相调用。经典项目如下:

链接: https://pan.baidu.com/s/1kVwRnYB 密码: vuwz

原生开发,发展到今天已经非常成熟完善,已有组件成千上万,极大的提高了开发效率。而React Native 在Facebook的React.js conf 2015上提出,至今一年多,组件数目肯定没得和原生的相比。
因此,在使用React Native开发App的过程中,我们可能需要调用RN没有实现的原生视图组件或第三方组件。甚至,我们可以把本地模块构造成一个React Native组件,提供给别人使用。

本文的demo基于SDCycleScrollView,即banner,因为想不到什么好的例子,所以就把在做的项目用到的SDCycleScrollView封装下,直接给js调用。

SDCycleScrollView为github开源的无限循环自动图片轮播器。
地址为:https://github.com/gsdios/SDCycleScrollView
里面会用SDWebImage,如果项目已用到SDWebImage,则建议直接把SDCycleScrollView相关代码拉进项目就OK了。

一、对原生视图进行进一步封装

参考其他人对原生视图的封装,大多都会新建一个视图,继承(或者子视图包含)原生视图,里面可能含有事件的调用(这里简单demo,就没用到)。
#import "UIView+React.h",对原生视图进行扩展(这里有个重要的属性reactTag,后面会用到,作为区分用途)。

TestScrollView.h

#import "SDCycleScrollView.h"


#import "RCTComponent.h"
#import "UIView+React.h"


@interface TestScrollView : SDCycleScrollView


@property (nonatomic, copy) RCTBubblingEventBlock onClickBanner;


@end

在封装的UIView中声明RCTBubblingEventBlock或RCTBubblingEventBlock类型的block属性,才可以被当做事件导出。(新的事件导出方式,后面会用到哦)
注意:声明block属性名称要以on开头(不确定为什么,在不做其它配置的情况下,只有on开头能成功)

TestScrollView.m

#import "TestScrollView.h"


@implementation TestScrollView


/**
 *  挺多封装原生的第三方组件都会这么写,这里还没研究透彻,就没按着去实现
- (instancetype)initWithBridge:(RCTBridge *)bridge {
    if ((self = [super initWithFrame:CGRectZero])) {
        _eventDispatcher = bridge.eventDispatcher;
        _bridge = bridge;
        ......
    }
    return self;
}
 */
@end

二、创建RCTViewManager子类来创建和管理原生视图

原生视图都需要被一个RCTViewManager的子类来创建和管理。
这些管理器在功能上有些类似“视图控制器”,但它们本质上都是单例 - React Native只会为每个管理器创建一个实例。
它们创建原生的视图并提供给RCTUIManager,RCTUIManager则会反过来委托它们在需要的时候去设置和更新视图的属性。RCTViewManager还会代理视图的所有委托,并给JavaScript发回对应的事件。

提供原生视图步骤如下:

  • 首先创建一个子类 —— 命名规范为“视图名称+Manager”. 视图名称可以加上自己的前缀,这里最好避免使用RCT前缀,除非你想给官方pull request
  • 添加RCT_EXPORT_MODULE()标记宏 —— 让模块接口暴露给JavaScript
  • 实现-(UIView *)view方法 —— 创建并返回组件视图
  • 封装属性及传递事件

下面先贴出完整的代码,然后会对属性和事件进行进一步的解说。

TestScrollViewManager.h

#import "RCTViewManager.h"


@interface TestScrollViewManager : RCTViewManager


@end

TestScrollViewManager.m

#import "TestScrollViewManager.h"
#import "TestScrollView.h"      //第三方组件的头文件


#import "RCTBridge.h"           //进行通信的头文件
#import "RCTEventDispatcher.h"  //事件派发,不导入会引起Xcode警告


@interface TestScrollViewManager() <SDCycleScrollViewDelegate>


@end


@implementation TestScrollViewManager


//  标记宏(必要)
RCT_EXPORT_MODULE()


//  事件的导出,onClickBanner对应view中扩展的属性
RCT_EXPORT_VIEW_PROPERTY(onClickBanner, RCTBubblingEventBlock)


//  通过宏RCT_EXPORT_VIEW_PROPERTY完成属性的映射和导出
RCT_EXPORT_VIEW_PROPERTY(autoScrollTimeInterval, CGFloat);


RCT_EXPORT_VIEW_PROPERTY(imageURLStringsGroup, NSArray);


RCT_EXPORT_VIEW_PROPERTY(autoScroll, BOOL);


- (UIView *)view
{
    //  实际组件的具体大小位置由js控制
    TestScrollView *testScrollView = [TestScrollView cycleScrollViewWithFrame:CGRectZero delegate:self placeholderImage:nil];
    //  初始化时将delegate指向了self
    testScrollView.pageControlStyle = SDCycleScrollViewPageContolStyleClassic;
    testScrollView.pageControlAliment = SDCycleScrollViewPageContolAlimentCenter;
    return testScrollView;
}


/**
 *  当事件导出用到 sendInputEventWithName 的方式时,会用到
- (NSArray *) customDirectEventTypes {
    return @[@"onClickBanner"];
}
 */


#pragma mark SDCycleScrollViewDelegate
/**
 *  banner点击
 */
- (void)cycleScrollView:(TestScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index
{
//    这也是导出事件的方式,不过好像是旧方法了,会有警告
//    [self.bridge.eventDispatcher sendInputEventWithName:@"onClickBanner"
//                                                   body:@{@"target": cycleScrollView.reactTag,
//                                                          @"value": [NSNumber numberWithInteger:index+1]
//                                                        }];


    if (!cycleScrollView.onClickBanner) {
        return;
    }


    NSLog(@"oc did click %li", [cycleScrollView.reactTag integerValue]);


    //  导出事件
    cycleScrollView.onClickBanner(@{@"target": cycleScrollView.reactTag,
                                    @"value": [NSNumber numberWithInteger:index+1]});
}


// 导出枚举常量,给js定义样式用
- (NSDictionary *)constantsToExport
{
    return @{
             @"SDCycleScrollViewPageContolAliment": @{
                     @"right": @(SDCycleScrollViewPageContolAlimentRight),
                     @"center": @(SDCycleScrollViewPageContolAlimentCenter)
                     }
             };
}


//  因为这个类继承RCTViewManager,实现RCTBridgeModule,因此可以使用原生模块所有特性
//  这个方法暂时没用到
RCT_EXPORT_METHOD(testResetTime:(RCTResponseSenderBlock)callback) {
    callback(@[@(234)]);
}


@end

属性

RCT_EXPORT_VIEW_PROPERTY(autoScrollTimeInterval, CGFloat);

通过宏RCT_EXPORT_VIEW_PROPERTY完成属性的映射和导出。
CGFloat为autoScrollTimeInterval的OC数据类型,转化成js则对应number。

React Native用RCTConvert来在JavaScript和原生代码之间完成类型转换。
支持的默认转换类型(部分)如下:

  • string (NSString)
  • number (NSInteger, float, double, CGFloat, NSNumber)
  • boolean (BOOL, NSNumber)
  • array (NSArray) 包含本列表中任意类型
  • map (NSDictionary) 包含string类型的键和本列表中任意类型的值

如果转换无法完成,会产生一个“红屏”的报错提示,这样你就能立即知道代码中出现了问题。如果一切进展顺利,上面这个宏就已经包含了导出属性的全部实现。

ps:更复杂的类型转换,则涉及到MKCoordinateRegion类型,本文没做应用,具体可参考官方文档例子。

事件

js和原生之间需要有事件的交互,例如,在原生实现的代理或者点击事件,js也需要实时获取到此类事件时,就需要利用事件进行交互。
事件的实现方式有以下两种:

  1. 通过sendInputEventWithName实现
    1) 实现customDirectEventTypes,返回自定义的事件名数组(on开头才有效)

    - (NSArray *) customDirectEventTypes {
     return @[@"onClickBanner"];
    }

    2) sendInputEventWithName实现事件调用(reactTag用于实例的区分)

    [self.bridge.eventDispatcher sendInputEventWithName:@"onClickBanner"
                                                   body:@{@"target": cycleScrollView.reactTag,
                                                          @"value": [NSNumber numberWithInteger:index+1]
                                                         }];
  2. 通过RCTBubblingEventBlock实现
    1) 在封装的View中添加RCTBubblingEventBlock的block属性(on开头才有效)

    @property (nonatomic, copy) RCTBubblingEventBlock onClickBanner;

    2) 在Manager类中通过宏RCT_EXPORT_VIEW_PROPERTY完成Block属性的映射和导出

    RCT_EXPORT_VIEW_PROPERTY(onClickBanner, RCTBubblingEventBlock)

    3) 实现事件调用(reactTag用于实例的区分)

    cycleScrollView.onClickBanner(@{@"target": cycleScrollView.reactTag,
                                     @"value": [NSNumber numberWithInteger:index+1]});

通过上面两种方式封装好的事件,在js中可以直接利用同名函数调用即可(后面会展示)。
不过关于事件这块,挺多都没完全弄懂,希望有大神引导引导,比如为什么只能定义on开头、如何自定义、如何事件数据源的回调等等。。。

样式

因为我们所有的视图都是UIView的子类,大部分的样式属性应该直接就可以生效。有些属性定义,需要用到枚举,则可以利用通过原生传递来的常数方式来实现,具体实现如下:

// 导出枚举常量,给js定义样式用
- (NSDictionary *)constantsToExport
{
    return @{
             @"SDCycleScrollViewPageContolAliment": @{
                     @"right": @(SDCycleScrollViewPageContolAlimentRight),
                     @"center": @(SDCycleScrollViewPageContolAlimentCenter)
                     }
             };
}

在js中调用则如下:

//  首先获取到常量
var TestScrollViewConsts = require('react-native').UIManager.TestScrollView.Constants;


//  调用

ps: 一部分组件会希望使用自己定义的默认样式,例如UIDatePicker希望自己的大小是固定的。比如大小用原生默认大小,这个例子具体可以参考官方文档的样式模块。

三、在JS中进行调用

在js中调用,可以有两种方式,一为直接作为扩展React组件调用,二为新建一个组件封装好,再进行调用。
下文用第二种方式,官方推荐,逻辑比较清晰。

1.先倒入原生组件,新建TestScrollView.js文件,在里面对TestScrollView导入,进行属性类型声明等。具体代码和解释如下:

TestScrollView.js

// TestScrollView.js


import React, { Component, PropTypes } from 'react';
import { requireNativeComponent } from 'react-native';


// requireNativeComponent 自动把这个组件提供给 "RCTScrollView"
var RCTScrollView = requireNativeComponent('TestScrollView', TestScrollView);


export default class TestScrollView extends Component {


  render() {
    return <RCTScrollView {...this.props} />;
  }


}


TestScrollView.propTypes = {
    /**
    * 属性类型,其实不写也可以,js会自动转换类型
    */
    autoScrollTimeInterval: PropTypes.number,
    imageURLStringsGroup: PropTypes.array,
    autoScroll: PropTypes.bool,


    onClickBanner: PropTypes.func
};


module.exports = TestScrollView;

2.在index.ios.js中进行调用

index.ios.js

var TestScrollView = require('./TestScrollView');


// requireNativeComponent 自动把这个组件提供给 "TestScrollView"
// 如果不新建TestScrollView.js对原生组件封装声明,则直接用这句导入即可
// var TestScrollView = requireNativeComponent('TestScrollView', null);


// 导入常量
var TestScrollViewConsts = require('react-native').UIManager.TestScrollView.Constants;


var bannerImgs = [
  'http://upload-images.jianshu.io/upload_images/2321678-ba5bf97ec3462662.png?imageMogr2/auto-orient/strip%7CimageView2/2',
  'http://upload-images.jianshu.io/upload_images/1487291-2aec9e634117c24b.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/480/q/100',
  'http://f.hiphotos.baidu.com/zhidao/pic/item/e7cd7b899e510fb37a4f2df3db33c895d1430c7b.jpg'
];


class NativeUIModule extends Component {


  constructor(props){
    super(props);
    this.state={
        bannerNum:0
    }
  }


  render() {


    return (
      <ScrollView style = {{marginTop:64}}>
      <View>
        <TestScrollView style={styles.container} 
          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控制
const styles = StyleSheet.create({
  container:{
    padding:30,
    borderColor:'#e7e7e7',
    marginTop:10,
    height:200,
  },
});


AppRegistry.registerComponent('NativeTest2', () => NativeUIModule);

若使用第一种方式,即使用下面语句进行组件的引用:

var TestScrollView = requireNativeComponent('TestScrollView', null);

则会存在的这样的问题:
虽然很方便简单,但这样并不能很好的说明这个组件的用法——用户要想知道我们的组件有哪些属性可以用,以及可以取什么样的值,他不得不一路翻到Objective-C的代码。要解决这个问题,我们可以创建一个封装组件,并且通过PropTypes来说明这个组件的接口。

注意:我们现在把requireNativeComponent的第二个参数从null变成了用于封装的组件TestScrollView。这使得React Native的底层框架可以检查原生属性和包装类的属性是否一致,来减少出现问题的可能。

关于属性、事件的调用,则是如下直接调用:

2}
          imageURLStringsGroup = {bannerImgs}
          pageControlAliment = {TestScrollViewConsts.SDCycleScrollViewPageContolAliment.right}
          onClickBanner={(e) => {
            console.log('test' + e.nativeEvent.value);
            this.setState({bannerNum:e.nativeEvent.value});
          }}
/>

关于事件,需要注意的是,事件事件默认传递的是字典数据类型,即json,在js中调用需要利用e.nativeEvent才能将字典取出,在具体调用里面的值。(这里也还未研究透彻、需要指导)

React Native 与原生代码之间混合互相调用。经典项目如下:

链接: https://pan.baidu.com/s/1kVwRnYB 密码: vuwz


阅读更多
个人分类: React-native
上一篇关于iOS开发者学习React-Native的路线
下一篇React Native未来导航者:react-navigation 使用详解(基础篇)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭