ReactNativeOne React-Native 的「ONE·一个」

我要开发同款
匿名用户2016年10月31日
37阅读
开发技术JavaScript
所属分类React开源项目、手机/移动开发、网站客户端
授权协议GPL

作品详情

「ONE·一个」是由韩寒监制,原《独唱团》主创成员共同制作的一款文艺生活APP

支持设备:Android4.1+andiOS8.0+

声明

该APP所用到的API均由 「ONE·一个」提供,本人采取非正常手段获取。获取跟共享的行为或许有侵犯权益的嫌疑。请您了解相关情况,并保证不侵犯「ONE·一个」的利益,并遵守开源协议

项目描述

基于React-Native框架开发,能同时运行在Android、iOS环境下,实现80%的代码复用,GitHub地址:https://github.com/lipeiwei-szu/ReactNativeOne

到目前为止,该项目均由本人独立完成,希望能有更多的小伙伴来一起完善这个项目。实现了「ONE·一个」绝大部分的功能点,涵盖了图文、阅读、音乐、电影四大版块,以下是功能列表

使用ViewPager跟ListView展示图文列表、查看往期历史图文信息、点击查看大图

三种系列(短篇、连载、问答)的文章阅读以及文章音频播放,查看往期文章列表

音乐故事展示、音乐播放、查看历史音乐列表

最近电影信息列表、查看电影详情页面、电影预告片播放、查看剧照列表

查看文章、音乐、电影的评论列表,自定义扩展ListView,实现上拉加载更多数据

微信好友分享、微信朋友圈分享

缓存api接口数据,充分节省流量,增强用户体验

接口文档

请到ONE-API查看

APP截图

               

整体思路

分析「ONE·一个」App的业务逻辑结构,将整体业务按重要程度进行划分,安排整体开发流程

在Mac环境下使用Charles软件抓包,抓取「ONE·一个」的网络接口数据,并整理接口文档,文档地址是https://github.com/lipeiwei-szu/ONE-API

使用官方的Navigator管理全局路由,可自由配置Scene的出场动画,处理Android端的后退键事件

使用FlexBox和jsx语法进行布局,并封装了一系列通用的组件,比如GridView、带上下拉功能的ListView、ImageViewer等,便于全局复用

在Android原生端实现音频播放功能,并导出NativeApi给ReactNative使用

导入VideoNativeApi,自定义界面并实现电影预告片的加载播放

导入GitHub第三方库react-native-wechat实现图文、阅读、音乐、电影的微信分享

处理了App加载网络数据时的各种状态,比如加载中、加载成功、加载失败、点击屏幕重新进行加载等

使用InteractionManager,保证每个页面都在转场动画结束时才进行耗时操作,使得切换页面时不卡顿,尽量减少View的层级,优化渲染性能

在深刻理解的前提下引入redux相关功能,包括redux/react-redux/redux-thunk/redux-logger,设计与音频相关的全局state结构,使用redux管理与音频state相关的组件

查看全文
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论