此文已由作者王翔授权网易云社区发布。

欢迎访问网易云社区,了解更多网易技术产品运营经验。

使用react-native的时候能够看到不少函数调用式的组件,像LinkIOS用来呼起url请求

 LinkIOS.openUrl('http://www.163.com');

actionSheetIOS用来实现ios客户端底部弹起的选择对话框

ActionSheetIOS.showActionSheetWithOptions({
  options: BUTTONS,
  cancelButtonIndex: CANCEL_INDEX,
  destructiveButtonIndex: DESTRUCTIVE_INDEX,
},
(buttonIndex) => {  this.setState({ clicked: BUTTONS[buttonIndex] });
});

这些组件的使用方式都大同小异,通过声明一个native module,然后在这个组件内部通过底层实现方法的具体内容

像ActionSheetIOS在使用的时候,首先需要在工程的pod库中添加ActionSheetIOS对应的RCTActionSheet

pod 'React', :path => 'node_modules/react-native', :subspecs => ['Core','RCTActionSheet'# Add any other subspecs you want to use in your project]

我们可以看到RCTActionSheet相关的实现的代码是放在react-native/Libraries/ActionSheetIOS下的

整个工程包含3个代码文件,ActionSheetIOS.js、RCTActionSheetManager.h、RCTActionSheetManager.m

ActionSheetIOS.js内容很简单,先是定义了引用oc代码的方式

var RCTActionSheetManager = require('NativeModules').ActionSheetManager;

然后定义了ActionSheetIOS组件,并export

var ActionSheetIOS = {
  showActionSheetWithOptions(options: Object, callback: Function) {
    invariant(      typeof options === 'object' && options !== null,      'Options must a valid object'
    );
    invariant(      typeof callback === 'function',      'Must provide a valid callback'
    );
    RCTActionSheetManager.showActionSheetWithOptions(
      {...options, tintColor: processColor(options.tintColor)},
      callback
    );
  },
  ....., };module.exports = ActionSheetIOS;

我们看到关键是引入底层oc的方式,其他的跟写前端没啥差别

然后再看RCTActionSheetManager的实现

#import "RCTBridge.h"@interface RCTActionSheetManager : NSObject@end

主要是实现了RCTBridgeModule这个协议,这个协议是实现前端js-》oc的主要中间件,感兴趣的可以看看实现,

然后就是对RCTActionSheetManager的实现的代码,关键几句

@implementation RCTActionSheetManager
{
// Use NSMapTable, as UIAlertViews do not implement // which is required for NSDictionary keys
NSMapTable *_callbacks;} RCT_EXPORT_MODULE()
...
RCT_EXPORT_METHOD(showActionSheetWithOptions:(NSDictionary *)options
                  callback:(RCTResponseSenderBlock)callback)
{
  ...
}

主要是RCT_EXPORT_MODULE用来注册react-native module ,然后具体的实现方法放在RCT_EXPORT_METHOD开头的函数内

RCT开头的宏用来区分react-native函数与原声的函数,jspatch的bang有过具体分析,感兴趣的可以看看

http://blog.cnbang.net/tech/2698/

所以我们自己实现一个原生的react-native组件的时候,完全可以照着actionSheetIOS来做

在前端自定义一个js,通过require('NativeModules').XXX 引入

然后在底层实现RCTBridgeModule的类,在类里把RCT_EXPORT_MODULE、RCT_EXPORT_METHOD加上即可

网易云免费体验馆,0成本体验20+款云产品!

更多网易技术、产品、运营经验分享请点击

相关文章:
【推荐】 3分钟掌握一个有数小技能:回头客分析

react-native自定义原生组件的更多相关文章

  1. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  2. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

  3. React Native之原生模块的开发(Android)学习笔记

      目录 1.为什么我们需要原生模块开发 2.开发Android原生模块的主要流程 3.原生模块开发实战   1.为什么我们需要原生模块开发? 我们在用RN开发App的时候,有时候需要用到一些原生模块 ...

  4. [RN] React Native 自定义 底部 弹出 选择框 实现

    React Native 自定义 底部选择框 实现 效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...

  5. React Native 导入原生Xcode项目总结与记录

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  6. React Native移植原生Android

    (一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...

  7. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  8. [RN] React Native 自定义导航栏随滚动渐变

    React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...

  9. [转]Shared——React Native与原生关系理解与对比

    零.关系理解 这个是我对RN和原生关系的理解.简单解释下这个图. RN js编写完业务代码后,通过react-native bundle命令,将代码分别编译成一个index.ios.bundle和in ...

  10. 从零学React Native之08Image组件

    开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...

随机推荐

  1. 安全测试回顾(一)补充:burp 的基本操作

    浏览器设置; 拦截请求: Spider 伪造请求: 对这个url 伪造请求 拦截一个页面后,进入攻击模块 sniper  两个参数值 保证一个不变  另一个 进行枚举 battering ram 两个 ...

  2. 【树莓派】开机自启动脚本方法之一(.Desktop文件)

    转载处: 又一个让树莓派开机运行Python脚本的方法 Linux 创建启动器(.Desktop文件) 首先,树莓派使用的是官方推荐的镜像:RASPBIAN: 在树莓派上常常会需要开机自启动pytho ...

  3. 如何重置Oracle服务器ILOM中root用户的密码

    在ILOM中,root用户的缺省密码是changeme. 为了系统的安全性,通常情况下需要修改root密码.  如果忘了密码,可以参考以下步骤重置root密码. 用串口线连接Oracle服务器ILOM ...

  4. BurpSuite系列(十一)----Project options模块(项目选择)

    一.简介 Project options主要用来对Project的一些设置. 二.模块说明 Project options主要由五个模块组成: 1.Connections 连接2.HTTP3.SSL4 ...

  5. 缓存数据库redis

    什么是Redis? Redis是一个TCP服务器,支持请求/响应协议. 在Redis中,请求通过以下步骤完成: 客户端向服务器发送查询,并从套接字读取,通常以阻塞的方式,用于服务器响应. 服务器处理命 ...

  6. xcode找回欢迎界面

    [xcode找回欢迎界面] 有一次嫌xcode界面烦,点击了以下checkbox取消了欢迎界面: 随后发现没了欢迎界面反而更不方便,一心想找回欢迎界面,Preference里找了半天没找到开关,原来开 ...

  7. 【原创】1. MYSQL++简介

    MYSQL++是对于MYSQL C API的C++完全包装. MYSQL++能够至少做如下几件事情 1. 连接数据库 通过TCP连接数据库 通过WINDOWS命名管道连接数据库 UNIX域SOCKET ...

  8. SSH连接Linux

    转载自百度经验 https://jingyan.baidu.com/article/bea41d439d16d7b4c51be619.html 连接Linux的工具有Putty.SSH Secure ...

  9. Eclipse右击jsp没有运行选项

    maven项目低级错误,没有更新maven资源库.....更新后就运行起来了

  10. SqlServer try catch 捕获不到的一些错误及解决方法

    IF (OBJECT_ID('AA','U') IS NOT NULL) DROP TABLE AA CREATE TABLE AA(ID INT) SELECT * FROM AA --注:数据库当 ...