从Android到React Native开发(三、自定义原生控件支持)

恍惚间3个月过去了,作为揭棺而起的失踪人口,迟来的第三篇,也是react native原生相关的最后的一篇,是时候给收个尾了。这次就不废话了,直接上主题( ̄^ ̄)ゞ。

 react native的高效,在于其中大部分组件,都是基于原生封装的,js中对组件的配置与操作,最终都会转化为native控件行为。以上的这段废话,总结起来就是:react native通过统一的接口封装,把原生控件转为js组件使用。

 既然有官方封装,那肯定少不了自定义控件。react native自定义组件还是很方便的,关键就在于ViewManager/ViewGroupManager。从类名上,很明显是对应原生中的View和ViewGroup。

(PS :react native 中的View组件,封装的其实是ViewGroupManager,所以View组件才可以包裹子组件,组件中的ZIndex属性,其实就是子组件在add到ViewGroup中先后,如下图)

 其他的内部细节就不深究咯,愉悦的奔向主题吧(˶‾᷄ ⁻̫ ‾᷅˵)。注意,下方代码分析大部分来自以下路径:

//js组件
node_modules/react-native/Libraries/Components/View
node_modules/react-native/Libraries/Components/WebView

//原生java
react-native-0.xx.x/com.facebook/react/views/view
react-native-0.xx.x/com.facebook/react/views/webview

1、继承ViewGroupManager

 首先我们需要实现一个XXXGroupManager,继承于ViewGroupManager。其中最主要的便是重载实现getName和creatViewInstance两个方法。

  • getName 指定了XXXGroupManager在js组件中获取的名称。
  • creatViewInstance 创建了自定义控件在Manager中使用,这里只要将你在原生端的自定义控件,生成即可。

 js组件中,使用requireNativeComponent,可以通过上面中getName指定的名称,获取到对应的控件,如下图,通过获取到的控件,就可以配置对应的接口啦ε-(´∀`; )。

关于requireNativeComponent的使用说明参考下图

2、设置自定义控件属性

 react native 提供 @ReactProp@ReactPropGroup 注解,为js组件提供接口,配置原生控件的属性。如下图1,name = "borderStyle" 表示,js组件可以通过borderStyle设置控件的borderStyle,如图2。如果需要默认值,可以增加default属性。

图1
图2

 这里需要注意,@ReactPropGroup是一组相近的属性设置注解,如设置UI的上下左右的不同宽度,原生中通过index判断,而它们在js端组件的设置,可以统一到原生中的一个接口。

图3

3、原生控件操作JS组件

 react native提供原生控件对js组件的交互支持,和上一篇文章类似,也是通过事件机制发送,发送消息到js组件中,js组件通过监听事件的callback处理消息。

 首先,在 UIManagerModuleConstants.java 中,如图4,react native默认映射了一些组件的消息事件名,如topChange在js组件中通过onChange监听,这样在原始中通过topChange发送的消息,就可以在组件中的onChange接收到消息。

 消息中的参数,可以通过WritableMap传递数据,利用rctEventEmitter发送消息。

图4
图5

 有时候,你可能还需要自定义自己的消息名,那么你需要重写

getExportedCustomDirectEventTypeConstants ,只有注册了你的映射消息关系,才可以在js组件中,正常接收到你自定的消息名的消息。

图6
图7
4、js组件操作原生控件 既然原生控件可以操作组件,那么js组件也有控制原生控件的需求。这时候我们可以重载 getCommandsMap ,用来注册js组件支持的操作行为,通过 receiveCommand 处理操作,如在js组件中调用reload,就会触发原生XXXGroupManager中receiveCommand的root.reload,从而与原生控件交互。图9中,通过UIManager,发送命令到原生。
图8
图9
 这类使用方式,类似的使用场景有,例如

//textInput组件中主动获取焦点

UIManager.dispatchViewManagerCommand(


                ReactNative.findNodeHandle(this.textInput),


                UIManager.AndroidTextInput.Commands.focusTextInput,



                null);

5、js端组件实现

 最终在原生端配置结束后,js端配置完对应逻辑,通过 module.exports = WebView 导出组件使用。

结言

 拖了这么久,react native和andorid原生相关的文章终于收尾啦(◐‿◑),也算是对react native的一个里程碑吧。在实际开发中,react native的代码的复用率还是挺高的,作为跨平台开发的一种,还是蛮推荐大家尝试下。

 接下来有时间会把github的demo完善下,毕竟demo落下的有点多了,欢迎大家关注哟ε-(´∀`; )。

个人github入口:https://github.com/CarGuo ****

还记得我吗?

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BY的专栏

iOS开启热点或定位时状态栏变化导致布局改变

56350
来自专栏疯狂的小程序

像 React Native 开发 APP 一样,用wn-cli 开发 weapp (微信小程序)

wn-cli 像React组件开发一样来开发微信小程序

42760
来自专栏ionic3+

【Appetite】ionic3实录(二)UI分析及总体配置

首先,如果你是初学者,我强力建议你先看完我这篇文章: 【开发指南】(四)Ionic3快速上手并了解这些

12630
来自专栏北京马哥教育

[来稿]pycharm快捷键、tips、常用设置及版本控制 制

在PyCharm安装目录 /opt/pycharm-3.4.1/help目录下可以找到ReferenceCard.pdf快捷键英文版说明 or 打开pychar...

54080
来自专栏北京马哥教育

最全整理 | 121个Ubuntu终端常用快捷键

Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手。在Ubuntu中打开终端的快捷键是Ctrl+Alt+T。其他的一...

353120
来自专栏向治洪

用xml来编写动画

我们可以使用代码来编写所有的动画功能,这也是最常用的一种做法。不过,过去的补间动画除了使用代码编写之外也是可以使用XML编写的,因此属性动画也提供了这一功能,...

22050
来自专栏Golang语言社区

Go语言服务器开发之简易TCP客户端与服务端实现方法

Go语言具备强大的服务器开发支持,这里示范了最基础的服务器开发:通过TCP协议实现客户端与服务器的通讯。 一 服务端,为每个客户端新开一个goroutine 代...

383140
来自专栏Core Net

SharePoint 2016 修改左上角连接

32360
来自专栏小俊博客

Windows10中的键盘快捷方式

Windows 徽标键 + Shift + C打开超级按钮菜单Windows 徽标键 + D显示和隐藏桌面Windows 徽标键 + Alt + D显示和隐藏桌...

16020
来自专栏React Native开发圈

React Native二维码生成组件

value:二维码的值 size:大小,默认128 bgColor:背景色,默认#000 fgColor:前景是,默认#fff

13220

扫码关注云+社区

领取腾讯云代金券