react-native 自定义view向js暴露接口方法

解决方法参考：http://stackoverflow.com/questions/31857583/how-to-access-native-ui-components-instance-methods-in-react-native

This can be done within the custom native component's view manager.

Obj-c side: In the native view manager expose a native method like this:

The key is to pass in the reactTag which is the reference to the native component.

MyCoolViewManager.m :

RCT_EXPORT_METHOD(myCoolMethod:(nonnull <span style="font-family: Arial, Helvetica, sans-serif;">NSNumber *)reactTag callback:(RCTResponseSenderBlock)callback) {</span>
[self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, RCTSparseArray *viewRegistry) {MyCoolView *view = viewRegistry[reactTag];if (![view isKindOfClass:[MyCoolView class]]) {RCTLogMustFix(@"Invalid view returned from registry, expecting MyCoolView, got: %@", view);}// Call your native component's method here[view myCoolMethod];}];
}

JS side: Add API in the react component class:

MyCoolView.js:

var React = require('react-native');
var NativeModules = require('NativeModules');
var MyCoolViewManager = NativeModules.MyCoolViewManager;
var findNodeHandle = require('findNodeHandle');class MyCoolView extends React.Component{// ...myCoolMethod() {return new Promise((resolve, reject) => {MyCoolViewManager.myCoolMethod(findNodeHandle(this),(error, result) => {if (error) {reject(error);} else {resolve(result);}});});}
}

react-native 自定义view向js暴露接口方法相关推荐

[RN] React Native 自定义底部弹出选择框实现
React Native 自定义底部选择框实现效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...
[RN] React Native 自定义导航栏随滚动渐变
React Native 自定义导航栏随滚动渐变实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...
React Native自定义导航栏
之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了 ...
自定义view中onSizeChanged、onFinishInflate方法调用时机
转自:http://blog.csdn.net/anhenzhufeng/article/details/72886181 一般自定义View或ViewGroup基本上都会去实现onMeasure.o ...
React Native 自定义组件报错 has no propType for native prop
在使用自定义UI组件时,定义JS组件报如下错误 has no propType for native prop.If you haven't changed this prop yourself,th ...
React Native中View绝对定位absolute居中问题
让一个view垂直居中 position: 'absolute',right:0,marginBottom: "auto",marginTop:"auto",h ...
关于react native code push的JS端配置攻略
1. 引用CodePush高阶组件,应用在项目根组件中: import CodePush from "react-native-code-push";class App exten ...
React Native - 3 View, Text简介以及onPress onLongPress事件
我们要生成如下的构图直接上图,不解释. 如下图所示,定义函数,函数之间不需要逗号,在元素上添加事件,使用关键字this.{function name} 转载于:https://www.cnblogs ...
小程序自定义view以及某些属性使用方法
1.自定义dialog //wxml文件<view class="modal-mask" bindtap="onCance ...
React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信）
[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景有了前面<React Native Android 从学车到 ...

react-native 自定义view向js暴露接口方法

react-native 自定义view向js暴露接口方法相关推荐

最新文章

热门文章