react-native自定义原生组件
此文已由作者王翔授权网易云社区发布。
欢迎访问网易云社区,了解更多网易技术产品运营经验。
使用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自定义原生组件的更多相关文章
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
- React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块
尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
- React Native之原生模块的开发(Android)学习笔记
目录 1.为什么我们需要原生模块开发 2.开发Android原生模块的主要流程 3.原生模块开发实战 1.为什么我们需要原生模块开发? 我们在用RN开发App的时候,有时候需要用到一些原生模块 ...
- [RN] React Native 自定义 底部 弹出 选择框 实现
React Native 自定义 底部选择框 实现 效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...
- React Native 导入原生Xcode项目总结与记录
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- React Native移植原生Android
(一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...
- React Native之倒计时组件的实现(ios android)
React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...
- [RN] React Native 自定义导航栏随滚动渐变
React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...
- [转]Shared——React Native与原生关系理解与对比
零.关系理解 这个是我对RN和原生关系的理解.简单解释下这个图. RN js编写完业务代码后,通过react-native bundle命令,将代码分别编译成一个index.ios.bundle和in ...
- 从零学React Native之08Image组件
开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...
随机推荐
- python开发函数进阶:可迭代的&迭代器&生成器
一,可迭代的&可迭代对象 1.一个一个的取值就是可迭代的 iterable#str list tuple set dict#可迭代的 ——对应的标志 __iter__ 2.判断一个变量是不 ...
- python‘s tenth day for me
动态参数 *args **kwargs *args 动态参数,万能参数 # args 接受的就是实参对应的 所有位置参数,并将其放在元祖中. def func(*args): pri ...
- jquery添加和删除多个同名的input输入框
<script type="text/javascript"> function del(obj){ $(obj).parents("li").re ...
- 14-jQuery的ajax
什么是ajax AJAX = 异步的JavaScript 和 XML (Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据 ...
- 前端自动化之gulp
前端自动化之gulp 前题:1.安装好nodejs环境,或者nvm 2.安装npm包管理工具 简介: 可以自动的将开发阶段的代码进行压缩.合并.编译.加密等处理,生成项目提交的代码. 使用: gulp ...
- 判断修改的中的值,用前面的,否则容易获得空值;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 ...
- Android UI学习 - ListView (android.R.layout.simple_list_item_1是个什么东西)
Android UI学习 - ListView -- :: 标签:Android UI 移动开发 ListView ListActivity 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始 ...
- leetcode343
public class Solution { public int IntegerBreak(int n) { ) { ; } ) { ; } var max = int.MinValue; ; i ...
- apache配置多个虚拟主机 localhost访问不了解决方案
在httpd-vhosts.conf,重定向localhost <VirtualHost *:80> ServerAdmin webmaster@dummy-host2.exampl ...
- OSCache-JSP页面缓存(2)
如果在jsp中使用如下标签 <cache:cache key="foobar" scope="session"> some jsp content ...