仿喜马拉雅听书App

项目描述

该项目是仿照喜马拉雅APP使用React Native+ TypeScript开发 的 Native App项目，其主要功能有：

• 首页模块

  • 使用 iconfont-cli+ react-native-svg 实现图标引入，进而实现底部导航栏的图标切换功能
  • 头部的tab标签页点击切换的实现
  • 使用ApiFox模拟数据，获取轮播图图片
  • 使用FlatList实现猜你喜欢部分
  • 头部导航栏跟随轮播图实现渐变色效果
  • 向下滑动是实现列表渲染，并切换头部渐变色效果的隐藏与否

• 分类模块

  • 切换编辑模式实现标签选中加入到我的标签中
  • 将我的标签存储到dva仓库和本地
  • 在头部展示分类标签，并以此显示不同的页面

• 频道模块

  • 点击首页的猜你喜欢和首页的下方列表可以跳转进入频道列表页面
  • 上下 头部信息概况+下方的列表的布局，默认加载第二个tab标签的内容
  • 上下滚动，头部实现滚动时的淡入淡出，头部背景图玻璃模糊的效果

• 频道详情模块

  • 点击频道列表某一项进入频道详情页面
  • 点击弹幕按钮，实现频道图片放大到头部的整个屏幕区域，并从右到左加载弹幕
  • 自定义向下的返回按钮

• 底部标签导航器和播放按钮

  • 如果当前没有播放的音频，底部tabs中间显示的是一个不可点击的播放按钮
  • 如果正在播放音频不手动关闭就退出当前频道详情页面，将继续播放，并在底部显示旋转的图片，一旦点击能跳转回频道详情页面

• 我听模块

  • 使用新的本地存储数据库，用来存储比较复杂的数据，例如音频数据。
  • 记录用户曾经播放过的音频，能显示已经播放的进度百分比

• 发现模块

  • 视频的播放功能（react-native-video）,播放视频时能暂停掉其他的视频和音频的播放

• 账号模块

  • 登录和表单校验提交
  • 登录和登出功能的实现

环境准备

请按照React Native官网介绍准备你的开发环境，当然，也可以通过 掘金文章：《2024年最新MacOS下ReactNative环境搭建》来快速了解环境准备流程。以下是笔者本人的开发环境。

启动项目

IOS

# 项目首次启动必须 bundle install
bundle install

#安装相关的原生依赖
bundle exec pod install # 每次更新相关原生依赖的包时

# 正式启动
yarn ios

# 也可以通过XCode 启动，但是每次pod install 都需要退出Xcode重新打开工程，不然会发生`message error`这样的错误。

Android

yarn android

项目打包

其他注意事项

1.图片资源问题

原有图片资源地址挂了，于是笔者从喜马拉雅网站上导出了几张图片，使用node.js搭建了 一个静态图片资源服务器，以支持开发过程中图片的正常加载显示。

2.Android端网络请求问题

经过测试，Android端不支持localhost和127.0.0.1这样的地址，开发时必须使用本地的IP地址。