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组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...
随机推荐
- 安全测试回顾(一)补充:burp 的基本操作
浏览器设置; 拦截请求: Spider 伪造请求: 对这个url 伪造请求 拦截一个页面后,进入攻击模块 sniper 两个参数值 保证一个不变 另一个 进行枚举 battering ram 两个 ...
- 【树莓派】开机自启动脚本方法之一(.Desktop文件)
转载处: 又一个让树莓派开机运行Python脚本的方法 Linux 创建启动器(.Desktop文件) 首先,树莓派使用的是官方推荐的镜像:RASPBIAN: 在树莓派上常常会需要开机自启动pytho ...
- 如何重置Oracle服务器ILOM中root用户的密码
在ILOM中,root用户的缺省密码是changeme. 为了系统的安全性,通常情况下需要修改root密码. 如果忘了密码,可以参考以下步骤重置root密码. 用串口线连接Oracle服务器ILOM ...
- BurpSuite系列(十一)----Project options模块(项目选择)
一.简介 Project options主要用来对Project的一些设置. 二.模块说明 Project options主要由五个模块组成: 1.Connections 连接2.HTTP3.SSL4 ...
- 缓存数据库redis
什么是Redis? Redis是一个TCP服务器,支持请求/响应协议. 在Redis中,请求通过以下步骤完成: 客户端向服务器发送查询,并从套接字读取,通常以阻塞的方式,用于服务器响应. 服务器处理命 ...
- xcode找回欢迎界面
[xcode找回欢迎界面] 有一次嫌xcode界面烦,点击了以下checkbox取消了欢迎界面: 随后发现没了欢迎界面反而更不方便,一心想找回欢迎界面,Preference里找了半天没找到开关,原来开 ...
- 【原创】1. MYSQL++简介
MYSQL++是对于MYSQL C API的C++完全包装. MYSQL++能够至少做如下几件事情 1. 连接数据库 通过TCP连接数据库 通过WINDOWS命名管道连接数据库 UNIX域SOCKET ...
- SSH连接Linux
转载自百度经验 https://jingyan.baidu.com/article/bea41d439d16d7b4c51be619.html 连接Linux的工具有Putty.SSH Secure ...
- Eclipse右击jsp没有运行选项
maven项目低级错误,没有更新maven资源库.....更新后就运行起来了
- SqlServer try catch 捕获不到的一些错误及解决方法
IF (OBJECT_ID('AA','U') IS NOT NULL) DROP TABLE AA CREATE TABLE AA(ID INT) SELECT * FROM AA --注:数据库当 ...