React Native自定义组件与输出方法详解

简介

如果你看的这一篇,需要你对ReactNative的开发有一定的了解,此文讲的是在ReactNative提供的组件不能满足需求,或者native用于较成熟的组件想要输出,那么就需要用到自定义组件了.

通过该文,我们也可以对native和JS交互方式进行初步了解,关于输出方法内部实现,我们下一篇再剖.

Native module

native module就是实现了RCTBridgeModule协议的OC类.RCT就是ReaCT的缩写.

具体步骤如下

  • 引入#import <React/RCTBridgeModule.h>类,然后遵守RCTBridgeModule协议.
  • 实现RCT_EXPORT_MODULE(customName)方法. customName是自定义的组件名,如果不填默认为当前类名.这个组件名是用于向JS输出.

输出组建后,默认不会向JS输出任何方法,想要输出方法,需要自定义实现方法输出,使用宏RCT_EXPORT_METHOD ()

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
{
 RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}

对于JS端,调用时就可以如下

import {NativeModules} from 'react-native';
var CustomName = NativeModules.CalendarManager;
CustomName.addEvent('Birthday Party', '4 Privet Drive, Surrey');

注意

向JS输出的方法名,是RCT_EXPORT_METHOD之后,第一个冒号之前的名字.如果native已经暴露了多个冒号之前同名的方法,RN提供了RCT_REMAP_METHOD ()来制定方法名.

另外一点, RCT_EXPORT_METHOD回调进入的方法,默认并不在主线程,如果想要进行主线程的方法调用,需要手动进行dispatch_async(dispatch_get_main_queue(), ^{});回到主线程

RCT_EXPORT_METHOD参数

RCT_EXPORT_METHOD支持如下的参数类型

  • string (NSString)
  • number (NSInteger, float, double, CGFloat, NSNumber)
  • boolean (BOOL, NSNumber)
  • array (NSArray) of any types from this list
  • object (NSDictionary) with string keys and values of any type from this list
  • function (RCTResponseSenderBlock)

也支持所有RCTConvert支持的类型.

回调

native module支持回调类型RCTResponseSenderBlock

RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callback)
{
 NSArray *events = ...
 callback(@[[NSNull null], events]);
}

RCTResponseSenderBlock只支持一个参数:一个包含了多个参数的数组.在JS端可以如下,默认第一个参数是error.当没有错误时error为空.

CalendarManager.findEvents((error, events) => {
 if (error) {
 console.error(error);
 } else {
 this.setState({events: events});
 }
});

native module只能调用一次回调.如果想传递错误,通过RCTUtils.h类中的RCTMakeError来创建.

Promise

Promise是用于实现异步操作async/await的工具类.如果最后一个参数类型为RCTPromiseResolveBlock和RCTPromiseRejectBlock,JS端会返回一个promise对象,进行一步操作.

RCT_REMAP_METHOD(findEvents,
     findEventsWithResolver:(RCTPromiseResolveBlock)resolve
     rejecter:(RCTPromiseRejectBlock)reject)
{
 NSArray *events = ...
 if (events) {
 resolve(events);
 } else {
 NSError *error = ...
 reject(@"no_events", @"There were no events", error);
 }
}

JS端因为获取的是promise对象,可以使用await关键字进行异步调用并等待结果

async function updateEvents() {
 try {
 var events = await CalendarManager.findEvents();

 this.setState({events});
 } catch (e) {
 console.error(e);
 }
}

updateEvents();

关于线程

JS执行native module是在一个单独的线程实现的,可以通过- (dispatch_queue_t)methodQueue来控制.如果返回主线程,所有执行的方法会在主线程被执行.

- (dispatch_queue_t)methodQueue
{
 return dispatch_get_main_queue();
}

方法methodQueue之后在组件初始化时被调用一次.

输出实例

除了可以输出方法,还有输出实例.

- (NSDictionary *)constantsToExport
{
 return @{ @"firstDayOfTheWeek": @"Monday" };
}

在JS端可以直接获取console.log(CalendarManager.firstDayOfTheWeek);

只有在初始化时实例输出才是有效的,如果在运行时修改constantsToExport是不会影响JS环境的数据的.

输出枚举

通过typedef NS_ENUM()定义的枚举,可以通过增加RCTConvert的扩展来完成

@implementation RCTConvert (StatusBarAnimation)
 RCT_ENUM_CONVERTER(UIStatusBarAnimation, (@{ @"statusBarAnimationNone" : @(UIStatusBarAnimationNone),
            @"statusBarAnimationFade" : @(UIStatusBarAnimationFade),
            @"statusBarAnimationSlide" : @(UIStatusBarAnimationSlide)}),
      UIStatusBarAnimationNone, integerValue)
@end

之后就可以通过输出属性和方法等方式在JS中使用了.

native向JS发方法

想给JS发方法,可以继承类RCTEventEmitter,实现supportedEvents方法,然后通过调用self sendEventWithName:即可.

RCT_EXPORT_MODULE();

- (NSArray<NSString *> *)supportedEvents
{
 return @[@"EventReminder"];
}

- (void)calendarEventReminderReceived:(NSNotification *)notification
{
 NSString *eventName = notification.userInfo[@"name"];
 [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}];
}

JS端可以通过NativeEventEmitter进行注册和调用

import { NativeEventEmitter, NativeModules } from 'react-native';
const { CalendarManager } = NativeModules;

const calendarManagerEmitter = new NativeEventEmitter(CalendarManager);

const subscription = calendarManagerEmitter.addListener(
 'EventReminder',
 (reminder) => console.log(reminder.name)
);
...
// Don't forget to unsubscribe, typically in componentWillUnmount
subscription.remove();

注意取消订阅,一般在componentWillUnmount内执行.

客户端可以通过一些方式获取JS注册和移除订阅的事件,来优化只在有订阅者的情况下才发送事件.

// Will be called when this module's first listener is added.
-(void)startObserving {
 hasListeners = YES;
 // Set up any upstream listeners or background tasks as necessary
}

// Will be called when this module's last listener is removed, or on dealloc.
-(void)stopObserving {
 hasListeners = NO;
 // Remove upstream listeners, stop unnecessary background tasks
}

资料

native modules官文

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • react-native-tab-navigator组件的基本使用示例代码

    要做的效果很简单,如下图所示: 使用基本教程 1.引入组件 import TabNavigator from 'react-native-tab-navigator'; Github上的地址 2.render方法中返回: render() { return ( <View style={styles.container} > <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === '电影'}

  • React-Native TextInput组件详解及实例代码

    同时适配Android和IOS 代码注释比较详细 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, TextInput, Platform, TouchableOpacity, } from 'react-na

  • react-native中ListView组件点击跳转的方法示例

    前言 在 上一篇我们实现了NavigatorIOS与ListView结合使用的方法,那么这篇文章介绍一下ListView里点击跳转到新视图的方法,话不多说了,来一起看看详细的介绍吧. 先看效果 用法 NewsList.js _onPress(rowData) { this.props.navigator.push({ title: rowData, component: CNodeJSList, passProps: { name: rowData, } }) } 说明 使用 this.prop

  • ReactNative Image组件使用详解

    最近学习ReactNative感觉到挺有意思的,在学习的过程中,发现网上一些人写的文章内容过时了,这主要是ReactNative的版本升级太快,如果你现在看一篇16甚至15年写的文章,把知识点和官方文档对比下,会让你大跌眼镜.所以奉劝各位想学习ReactNative的同学,选择学习资料一定要以官方文档和官方demo为准,其他资料为辅. Image组件 在ReactNative中Image是用于显示图片的组件,和开发Android的时候ImageView控件相同的效果.它可以用来显示网络图片.静态

  • React Native中导航组件react-navigation跨tab路由处理详解

    前言 大家应该都有所体会,我们在一般应用都有跨tab跳转的需求, 这就需要特别处理下路由,所以 下面是使用react-navigation作为路由组件的一种方式. 具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill账单首页. 方法如下: 首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavig

  • React Native自定义标题栏组件的实现方法

    大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

  • 详解React native全局变量的使用(跨组件的通信)

    RN中有两种方式使用全局变量 1.通过导入导出文件的方式 新建constants.js文件 const object = { website:'http://www.hao123.com', name:'好123', }; export default object; 需要用到的时候导入文件 import constants from './constansts.js' <Text>{constants.name}</Text> 还可以有另外一种导入文件的写法 export def

  • React-Native 组件之 Modal的使用详解

    Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果. 属性 Modal提供的属性有: animationType(动画类型) PropTypes.oneOf(['none', 'slide', 'fade'] none:没有动画 slide:从底部滑入 fade:淡入视野 onRequestClose(被销毁时会调用此函数) 在 'Android' 平台,必需调用此函数 onShow(模态显示的时

  • 详解React Native开源时间日期选择器组件(react-native-datetime)

    项目介绍 该组件进行封装一个时间日期选择器,同时适配Android.iOS双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来 配置安装 npm install react-native-datetime --save 1.1.iOS环境配置 上面步骤完成之后,直接前台写js代码即可 1.2.Android环境配置 在android/setting.gradle文件中如下配置 ... include ':react-native-dateti

  • React-Native中一些常用组件的用法详解(一)

    前言 本文为大家介绍一下React-Native中一些常用的组件,由于对ES6的语法并没有完全掌握,这里暂时用ES5和ES6混用的语法. View组件 View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图. View的设计初衷是和StyleSheet搭配使用,这样可以使代码更清晰并且获得更高的性能.尽管内联样式也同样可以使用. View的常用样式设置 flex布局样式 backgroundColor:背景颜

随机推荐