React Native 下拉菜单容器实现

背景

本周算是把一个 react native 版的商家管理工具(iOS 版花花内嵌商家后台)完成,所以现在花一点时间来把其中一些值得记录下的东西整理一下写出来。 根据 UI 设计,很多页面都采下图的展示方式:

截图

可以看到,两个页面的结构相似:顶部都是若干个PickerIOS组件的集合(红色框部分),然后下面是不同的组件(蓝色框组件)。例如左图有3个PickerIOS而右图有4个PickerIOS,并且分别代表不同的筛选条件。左图中的内容组件包括一个图表以及一个列表,而右图只有一个列表。所以考虑把公共部分提取出一个公共组件,该组件可以实现:

  1. 红色框内的PickerIOS数量以及内容可以定制。
  2. 蓝色框内的内容组件可以作为一个属性传递给该组件,用来展示信息。
  3. 切换筛选条件,能够向后端请求数据,并更新内容组件。

功能实现

顶部的Picker集合采用配置的方式实现,即单独创建一个配置文件模块DropdownViewConfig.js,文件内容大致如下:

每个 key(如 platform 和 date 等)对


阅读全文 »

React Native 集成至已有 APP — 双向通信 II

今天看到 react-native 的官方 doc 上放出了最新的文档,正巧是介绍题目描述的问题,不过具体的方法还是参考这篇文档。所以可以直接去官网看文档。这里只是作为自己项目中的一个记录。

背景

承接上一篇介绍的 react-native 和已有 APP 之间的双向通信问题,本篇介绍另一个方向的通信,即:appCon -> appChild。

实现

思路是在 js 代码中订阅一个事件并绑定事件处理函数,然后在 native 代码中触发该事件。以下是在 native 中触发时间的代码

上面代码触发onOrderHelperClick事件,并且传递参数订单链接order_url。在 js 代码中相应添加对应事件订阅代码:

这样只要在 native 中执行上述代码,js 中就能捕获事件并获取参数,然后执行事件处理函数。

最后

大部分内容和思想在官方文档中都有提及,本文只是结合笔者自己项目简单记录实现思想。另,由于 react-native 的


阅读全文 »

React Native 集成至已有 APP — 双向通信 I

背景

因为之前用 react 开发了部门内部的技术分享网站,加之手上负责一个 WAP 业务模块。因为是 APP 内嵌的 h5 页面,也没有做过优化处理,所以考虑使用 react-native 重新实现一遍该模块改善体验。

经过1个月开发,产品作为独立 APP 开发完成,但经过与PM讨论,还是决定将它作为一个功能模块嵌入一个已有的 APP 中(下文简称 appCon,新的模块成为 appChild)。这就遇到几个需要考虑的点:

  • 如何将代码嵌入已有 appCon;
  • 如何实现 appCon 和 appChild 之间的双向通信。

其中双向通信有这样两个场景:

  1. appChild 中点击一个 button 会自动唤醒 appCon 中的聊天功能;
  2. appCon 中点击一个链接会自动跳转到 appChild 中的订单详情页。

本文先来实现上述第一点:appChild -> appCon 的通信。

实现

思路是在 appCon 中创建一个自定义模块,其中的方法理所当然可以调用 appCon 中其它部分的功能代码,比如唤醒聊天。然后通过 react-native 提供的方法将该模


阅读全文 »