React Native 初尝试之 CNode 社区客户端开发

前言

最近踏上了学习使用 React Native 进行客户端开发的征途，由于以前的技术栈一直是 Vue, 在大体看了一下React Native 的相关介绍后，感受有必要首先学习一下ReactJS。再看过相关文档后，以 CNode 社区的 API 上手体验了一下 React 的组件化开发方式，见 cnode-react-App。以后在边看文档边 Google 的过程当中，完成了人生中第一次客户端开发。下文中将给出以 CNode 社区为原型进行React Native 开发过程当中遇到的问题以及相关思考。

踩坑之路

实践出真知，虽然官方文档已经给出了详细的API以及教程，没有刻骨铭心的踩坑之旅，对于一些问题的理解可能也并不那么透彻。

Github 开源地址

https://github.com/monster1935/cnode-rn-app

App 预览

如下是 App 的部分截图：

已完成功能

目前在现有 CNode Api 的支持下，已经完成如下功能：

• 分类的文章显示
• 文章详情以及文章对应的评论展现，评论包括精彩评论和评论
• 用户的收藏列表、消息列表页面
• 设置、关于、github登陆页面（部分页面仅提供了导航占位，后期逐步完善）
• App 内部链接跳转至webview进行访问，点击更多能够刷新、跳转至浏览器访问
• 搜索功能，鉴于目前未提供搜索的接口，目前实现为前端按照检索词进行搜索
• 点击用户头像，跳转到用户信息详情页，展现该用户的最近发布以及最近回复
• 部分操做的权限控制，好比点赞、收藏、收藏列表、信息列表
• 扫码登陆流程
• 登陆后的我的信息展现以及退出功能

还没有完成以及待优化功能

• IOS 下的调试，目前仅仅测试了在 Android 下的表现
• 回复、发帖功能
• 添加代码区域的友好展现
• 导航的跳转，好比点赞或者收藏时，未登陆状态下用户须要跳转至登陆页面，登陆完成后应定位至点赞、收藏
• 添加 App 启动页面
• 用户详情页的动画存在必定问题
• 异步接口请求的相关控制，组件销毁后，abort相关未完成的请求

技术栈

在开发过程当中，用到了社区内较为优秀的一些开源贡献者提供的工具或者包，以下：

导航的实现 react-navigation

react-navigation 是 FaceBook 官方推荐使用的导航组件库，据称有着原生般的性能体验效果。使用起来也确实方便，在笔者进行开发的这段时间，react-navigation 的官方文档也进行了更新。官方文档还算详细，还有其余不少功能等待发掘。

图标 react-native-vector-icons

第三方的图标库，使用起来比较方便，项目中使用了 Ionicons 的风格。

全局状态管理 react-redux & redux

使用了 react-redux 进行全局状态管理，主要涉及到登陆后token, 用户信息以及文章列表的存储。相关须要登陆才能使用的模块也须要获取到全局状态中的token，进行相应的判断。

html 转 view react-native-htmlview

涉及到 web 端 html 在 React Native 上的复用问题，由于两端在 布局、组件以及样式上的机制差别，html 彻底的转换 view 不是很现实，可是在必定范围内实现转换仍是能够的。react-native-htmlview 是目前作的较为优秀的，不过在笔者的使用过程当中发现了一些问题，最终仍是clone了其代码，又在本地修改才解决的，下文会详细解释。

持久化存储 react-native-storage

用于登陆的token的持久化存储，每次启动 App 后，若是以前曾经登陆没必要重复登陆。其不只支持 React Native， 也提供了浏览器端的支持。

ActionSheet, 用于 webview 中的更多弹出面板 react-native-actionsheet

目前 app 中的连接均采用 app 内部的 webview 进行显示，显示的过程当中添加了progress 进度条，并添加了刷新以及在浏览器中打开功能。

二维码扫描组件, 基于 react-native-camera 的封装

基于 react-native-camera 封装的二维码扫码组件，思路借鉴了 react-native-qrcode的实现方法。

WebView 中的进度条显示 react-native-progress

一个更加友好的展现，在网页请求的过程当中添加了顶部进度条

遇到的问题

1. react-navigation 中使用可滑动的tab view, 滑动不生效

初次使用react-navigation 后，在首页添加了react-native-scrollable-tab-view, 发现滚动根本不起做用，查阅了相关资料，设置 TabNavigator的 swipeEnabled: false 便可。

2. 使用 react-native-htmlview 转换 html 字符串至 react native View 的过程，发现图片显示较小

在使用的过程当中发现图片显示异常，查看其 issue，发现有一样的开发者遇到这样的问题。查阅相关资料，React Native Text Inline Image, 这篇文章中解释了为何内嵌于 Text 中的 Image 在 Android 上显示太小的问题。缘由在于 React Native 的内部的处理问题，React Native 在这种状况下直接以 图片的原始尺寸进行显示，并未再该尺寸的基础上乘以 图片的 PixelRatio。做者给出了一种解决办法就是封装一个InlineImage 组件，在传入的尺寸属性上手动乘以 PixelRatio。

3. Android 上 Inline Image 经过 Image.getSize() 后没法更新图片大小

一波未平，一波又起。刚弄明白 Inline Image 显示太小的问题，发现仍是没法更加优雅的设置图片的尺寸。原始思路是经过 Image.getSize()后更新图片的尺寸。遗憾的是发现，图片不会更新大小，至今未发现缘由。（持续跟进）

4. 动手修改 react-native-htmlview，完美解决 Image 显示问题

为了更加优雅的显示文章的图片，阅读了 react-native-htmlview 的源码，发现之因此会出现 Inline Image 的问题，主要缘由是由于其 Image 是内嵌于 Text 节点，虽然其暴露了 NodeComponent 的 props， 不传的话默认为 Text。问题出现的缘由，在于含有 img 标签的父标签被渲染为了 Text。所以在源码中添加了如下内容：

// 节点 后代中若是含有 img ，则该节点渲染为 View
function _contains(children) {
  for(let i = 0, len = children.length; i < len; i++) {
    if (children[i].type === 'tag' && children[i].name === 'img' || _contains(children[i].children || [])) {
      return true;
    }
  }
  return false;
}
...
// 标签若是是div 或者 含有img标签的父标签均渲染为View
if (node.type === 'tag') {
  if (node.name === 'div' || _contains(node.children)) {
    opts.NodeComponent = View;
  } else {
    opts.NodeComponent = Text;
  }
}

完美解决了 Image 的显示问题。

总结

React Native 的开发若是有 React 的开发经验，上手仍是比较快的。主要是熟悉其组件的使用方式以及不一样组件之间的区别。目前仅仅实现了一个 Demo 版本，渲染效率以及内存消耗等问题还未优化。后期对React Native 有深刻的理解后，会进行相关方面的优化。

最后

技术学习的路上已经使用 CNodejs 的 Api 作过了好几个 demo，包括：

• vue-cnode
• cnode-react-app
• cnode-rn-app

感谢 CNode 社区提供的 Api，给广大开发者提供了学习练手的机会。