React Native 开源项目 - 高仿「ONE· 一个」,兼容 Android、iOS 双平台

redmouse 发布于1年前 阅读12518次
0 条评论

 

@lipeiwei-szu 开发的纯高仿「ONE·一个」,兼容Android、iOS双平台,开源地址: https://github.com/lipeiwei-szu/ReactNativeOne

欢迎大家star,fork....

本开源项目由江清清的技术专栏整理( http://www.lcode.org/ ),转发请求注明来源

项目介绍

基于React-Native框架开发,能同时运行在Android、iOS环境下,实现80%的代码复用,

刚创建的React Native交流九群: 536404410 ,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

实现了「ONE·一个」绝大部分的功能点,涵盖了图文、阅读、音乐、电影四大版块,以下是功能列表

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

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

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

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

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

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

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

项目用到的接口文档: https://github.com/lipeiwei-szu/ONE-API

整体思路

  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相关的组件

To Do List

  1. 搜索

  2. 音频视频缓存

  3. javascript热更新

  4. 收藏

  5. ......

配置运行

  1. clone this repo

  2. npm install

  3. react-native run-android or 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

运行截图

React Native 开源项目 - 高仿「ONE· 一个」,兼容 Android、iOS 双平台 React Native 开源项目 - 高仿「ONE· 一个」,兼容 Android、iOS 双平台

React Native 开源项目 - 高仿「ONE· 一个」,兼容 Android、iOS 双平台

React Native 开源项目 - 高仿「ONE· 一个」,兼容 Android、iOS 双平台

React Native 开源项目 - 高仿「ONE· 一个」,兼容 Android、iOS 双平台

React Native 开源项目 - 高仿「ONE· 一个」,兼容 Android、iOS 双平台

关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

React Native 开源项目 - 高仿「ONE· 一个」,兼容 Android、iOS 双平台

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。