文档章节

基于 React-Native 的高仿「ONE·一个」开源项目

两味真火
 两味真火
发布于 2016/10/31 19:42
字数 862
阅读 138
收藏 1

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

支持设备: Android 4.1+ and iOS 8.0+

声明

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

项目描述

  1. 基于 React-Native 框架开发,能同时运行在 Android 、 iOS 环境下,实现 80%的代码复用, GitHub 地址:https://github.com/lipeiwei-szu/ReactNativeOne
  2. 到目前为止,该项目均由本人独立完成,希望能有更多的小伙伴来一起完善这个项目。实现了「 ONE·一个」绝大部分的功能点,涵盖了图文、阅读、音乐、电影四大版块,以下是功能列表
    • 使用 ViewPager 跟 ListView 展示图文列表、查看往期历史图文信息、点击查看大图
    • 三种系列(短篇、连载、问答)的文章阅读以及文章音频播放,查看往期文章列表
    • 音乐故事展示、音乐播放、查看历史音乐列表
    • 最近电影信息列表、查看电影详情页面、电影预告片播放、查看剧照列表
    • 查看文章、音乐、电影的评论列表,自定义扩展 ListView ,实现上拉加载更多数据
    • 微信好友分享、微信朋友圈分享
    • 缓存 api 接口数据,充分节省流量,增强用户体验

接口文档

请到ONE-API查看

Android App 下载

ReactNativeOne-Android-V0.1 下载地址

iOS App 下载

无苹果开发者账号, 暂时无法打包 APP, 请亲自进行编译并在模拟器或手机上运行

APP 截图

请到 https://github.com/lipeiwei-szu/ReactNativeOne 查看具体信息

整体思路

  1. 分析「 ONE·一个」 App 的业务逻辑结构,将整体业务按重要程度进行划分,安排整体开发流程
  2. 在 Mac 环境下使用 Charles 软件抓包,抓取「 ONE·一个」的网络接口数据,并整理接口文档,文档地址是https://github.com/lipeiwei-szu/ONE-API
  3. 使用官方的 Navigator 管理全局路由,可自由配置 Scene 的出场动画,处理 Android 端的后退键事件
  4. 使用 FlexBox 和 jsx 语法进行布局,并封装了一系列通用的组件,比如 GridView 、带上下拉功能的 ListView 、 ImageViewer 等,便于全局复用
  5. 在 Android 原生端实现音频播放功能,并导出 Native Api 给 React Native 使用
  6. 导入 Video Native Api ,自定义界面并实现电影预告片的加载播放
  7. 导入 GitHub 第三方库 react-native-wechat 实现图文、阅读、音乐、电影的微信分享
  8. 处理了 App 加载网络数据时的各种状态,比如加载中、加载成功、加载失败、点击屏幕重新进行加载等
  9. 使用 InteractionManager ,保证每个页面都在转场动画结束时才进行耗时操作,使得切换页面时不卡顿,尽量减少 View 的层级,优化渲染性能
  10. 在深刻理解的前提下引入 redux 相关功能,包括 redux/react-redux/redux-thunk/redux-logger ,设计与音频相关的全局 state 结构,使用 redux 管理与音频 state 相关的组件

build

  1. git clone https://github.com/lipeiwei-szu/ReactNativeOne.git
  2. npm install
  3. react-native run-android
  4. react-native run-ios

第三方库

  1. redux
  2. react-redux
  3. redux-thunk
  4. redux-logger
  5. react-native-video
  6. react-native-toast
  7. react-native-wechat
  8. react-native-orientation
  9. react-native-scrollable-tab-view
  10. lipeiwei-szu/react-native-viewpager which is fork race604/react-native-viewpager
  11. react-native-simple-store

本文转载自:https://www.v2ex.com/t/316873#reply0

共有 人打赏支持
两味真火

两味真火

粉丝 2629
博文 28
码字总数 40694
作品 0
深圳
运营/编辑
私信 提问
ReactNative开源项目推荐 - iReading (运行)

iReading 是一个新闻阅读App,Android和iOS双适配。并且作者还在持续的更新。目前1100+star。 传送门: https://github.com/attentiveness/reading ,可自行查看项目介绍,线上版本地址,运行说明...

那不是尤迪安
2016/11/09
818
1
React Native实践之携程Moles框架

编者:本文来自携程框架研发部高级经理魏晓军在第二期【携程技术微分享】上的分享,以下为整理后的文字实录。视频回放可点击这里。关注携程技术中心微信公号ctriptech,可获知更多微分享课程...

ctriptech
2016/06/23
696
1
React-Native 的「ONE·一个」--ReactNativeOne

「ONE·一个」是由韩寒监制,原《独唱团》主创成员共同制作的一款文艺生活APP 支持设备: Android 4.1+ and iOS 8.0+ 声明 该APP所用到的API均由 「ONE · 一个」提供,本人采取非正常手段获取...

lipeiwei
2016/10/31
2.5K
2
前端开源项目周报0502

由OpenDigg 出品的前端开源项目周报第十九期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。 react-sketchap...

OpenDigg
2017/05/02
0
0
Android混合开发

前端周刊第 52 期:JS Conf 2017 开始报名、苹果腾讯开战、React Native 周边 哈哈,互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口,讨论这件事情的文章很多,前端周刊就没有收录相...

掘金官方
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于360插件化Replugin 2.3.1版本的AS配置解决方案

编译错误:No signature of method: com.android.build.gradle.internal.scope.VariantScopeImpl.getMergeAssetsTask() is applicable for argument types: () values: [] 解决方案:加入热心......

Gemini-Lin
36分钟前
1
0
大数据全系技术概览

什么是大数据? 大数据(big data),指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增...

董黎明
55分钟前
12
0
阿里巴巴微服务开源项目盘点(持续更新)

大前端、微服务、数据库、更多精彩,尽在开发者分会场 【Apache Dubbo】 Apache Dubbo 是一款高性能、轻量级的开源Java RPC框架,是国内影响力最大、使用最广泛的开源服务框架之一,它提供了...

阿里云官方博客
55分钟前
1
0
轻松掌握!一文教你用CloudBoot批量安装RancherOS

RancherOS是Rancher Labs设计的小巧、专用的容器操作系统。本文详细介绍了如何使用CloudBoot简单批量安装RancherOS。 作者简介 赵安家,山东顺能网络全栈研发工程师。前端后端通吃,DevOps、...

RancherLabs
今天
2
0
springmvc源码解析MvcNamespaceHandler之视图配置器和跨域配置

说在前面 本次主要介绍springmvc配置解析<mvc:freemarker-configurer/>、<mvc:velocity-configurer/>、 <mvc:cors>。关注“天河聊技术”更多中间件源码解析。 springmvc配置解析 本次介绍Mvc......

天河2018
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部