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

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

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

声明

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

项目描述

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

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

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

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

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

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

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

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

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

接口文档

请到ONE-API查看

Android App 下载

ReactNativeOne-Android-V0.1 下载地址

iOS App 下载

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

APP 截图

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

整体思路

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

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

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

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

在 Android 原生端实现音频播放功能，并导出 Native Api 给 React Native 使用

导入 Video Native Api ，自定义界面并实现电影预告片的加载播放

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

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

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

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

build

git clone https://github.com/lipeiwei-szu/ReactNativeOne.git

npm install

react-native run-android

react-native run-ios

第三方库

redux

react-redux

redux-thunk

redux-logger

react-native-video

react-native-toast

react-native-wechat

react-native-orientation

react-native-scrollable-tab-view

lipeiwei-szu/react-native-viewpager which is fork race604/react-native-viewpager

react-native-simple-store