从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

还记得我吗?

目录
相关文章
|
17天前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
65 4
React开发需要了解的10个库
|
21天前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
44 4
|
2月前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
21天前
|
XML 存储 Java
浅谈Android的TextView控件
浅谈Android的TextView控件
15 0
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
38 3
|
2月前
|
前端开发 JavaScript
React的事件与原生事件的执行顺序?
React的事件与原生事件的执行顺序?
|
3月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
38 0
|
3月前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
34 0
|
3月前
|
前端开发 JavaScript Android开发
React Native 快速入门简直太棒啦!构建跨平台移动应用的捷径,带你开启高效开发之旅!
【8月更文挑战第31天】React Native凭借其跨平台特性、丰富的生态系统及优异性能,成为移动应用开发的热门选择。它允许使用JavaScript和React语法编写一次代码即可在iOS和Android上运行,显著提升开发效率。此外,基于React框架的组件化开发模式使得代码更加易于维护与复用,加之活跃的社区支持与第三方库资源,加速了应用开发流程。尽管作为跨平台框架,React Native在性能上却不输原生应用,支持原生代码优化以实现高效渲染与功能定制。对于开发者而言,React Native简化了移动应用开发流程,是快速构建高质量应用的理想之选。
62 0