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

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

使用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. python开发函数进阶:可迭代的&迭代器&生成器

    一,可迭代的&可迭代对象 1.一个一个的取值就是可迭代的   iterable#str list tuple set dict#可迭代的 ——对应的标志 __iter__ 2.判断一个变量是不 ...

  2. python‘s tenth day for me

    动态参数    *args   **kwargs   *args  动态参数,万能参数 # args 接受的就是实参对应的  所有位置参数,并将其放在元祖中. def func(*args): pri ...

  3. jquery添加和删除多个同名的input输入框

    <script type="text/javascript"> function del(obj){ $(obj).parents("li").re ...

  4. 14-jQuery的ajax

    什么是ajax AJAX  =  异步的JavaScript 和 XML (Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据 ...

  5. 前端自动化之gulp

    前端自动化之gulp 前题:1.安装好nodejs环境,或者nvm 2.安装npm包管理工具 简介: 可以自动的将开发阶段的代码进行压缩.合并.编译.加密等处理,生成项目提交的代码. 使用: gulp ...

  6. 判断修改的中的值,用前面的,否则容易获得空值;this.dataGridView1.Rows[i].Cells[0].EditedFormattedValue; VS bool b = (bool)this.dataGridView1.Rows[i].Cells[0].Value;

    判断修改的中的值,用前面的,否则容易获得空值:this.dataGridView1.Rows[i].Cells[0].EditedFormattedValue;  VS     bool b = (b ...

  7. Android UI学习 - ListView (android.R.layout.simple_list_item_1是个什么东西)

    Android UI学习 - ListView -- :: 标签:Android UI 移动开发 ListView ListActivity 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始 ...

  8. leetcode343

    public class Solution { public int IntegerBreak(int n) { ) { ; } ) { ; } var max = int.MinValue; ; i ...

  9. apache配置多个虚拟主机 localhost访问不了解决方案

    在httpd-vhosts.conf,重定向localhost <VirtualHost *:80>    ServerAdmin webmaster@dummy-host2.exampl ...

  10. OSCache-JSP页面缓存(2)

    如果在jsp中使用如下标签 <cache:cache key="foobar" scope="session"> some jsp content ...