前言
最近踏上了学习使用 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 进行访问, 点击更多可以刷新跳转至浏览器访问
搜索功能, 鉴于目前未提供搜索的接口, 目前实现为前端按照检索词进行搜索
点击用户头像, 跳转到用户信息详情页, 展示该用户的最近发布以及最近回复
- // 节点 后代中如果含有 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;
- }
- }
- vue-cnode
- cnode-react-app
- cnode-rn-app
来源: http://www.tuicool.com/articles/uiyYnqZ