RN+Typescript仿ximalaya

在这一节中，我们将学习如何将播放音频、上一首、下一首和暂停音频时的状态保存到 Realm 数据库。 1. 保存音频播放数据 在 fetchShow 中，我们首先从 API 获取音频数据，并从 dva

在这一节中，我们将学习如何安装和配置 realmjs，并在项目中使用它进行本地数据存储。 1. 安装 realmjs 首先，我们使用以下命令安装 realm 库： realm 是一个涉及原生功能的库，

在这一节中，我们将学习如何实现 "我听" 模块的功能，并学习本地数据持久化的相关知识。 1. 为什么使用新的库？ 在第十章中，我们学习了 asyncStorage 用于本地数据持久化，它适合存储字符串

在这一节中，我们将为播放按钮添加点击事件，跳转到频道详情页面。 1. 在底部标签栏按钮跳转到详情页面 对于底部标签栏中的播放按钮，跳转非常简单。我们可以在 options 属性中设置一个函数，从中获取

在这一节中，我们将实现一个独立于页面的播放按钮。我们将复用上一节的 Play 组件，并在页面外部显示该按钮。 1. 创建 PlayView 组件 在 pages/view 中创建 PlayView 组

在这一节中，我们将自定义底部标签导航器按钮。具体实现步骤如下： 1. 自定义底部标签按钮 首先，打开 navigator/BottomTabs.tsx，在标签导航器中，使用 tabBarButton

在本章中，我们将实现底部标签导航器上的自定义按钮。按钮的状态根据音频播放状态进行切换。 1. 功能需求 播放按钮显示：如果当前没有播放音频，显示一个播放按钮。 播放状态显示：如果有音频正在播放，显示当

在本节中，我们将实现弹幕功能。当点击弹幕按钮时，多个弹幕从右往左移动，模拟真实的弹幕效果。 1. 创建弹幕组件 首先，我们创建 Barrage 组件，用于显示弹幕。弹幕从右往左移动，使用 Animat

在本节中，我们将实现点击弹幕按钮时，频道图片的缩放动画和展示透明渐变色的效果。 1. 保存频道页面的图片 首先，在跳转到详情页时，我们需要将频道页面的图片保存到 player 的 state 中，以便

在这一节中，我们将实现音频的上一首和下一首功能。点击按钮播放上一首或下一首时，我们需要获取上一首和下一首的音频信息。 1. 保存上一首、下一首音频的信息 首先，在跳转到频道详情页面时，将上一首和下一首

在上一节中，我们已经实现了音频播放功能，但未能实现暂停播放和显示播放时间。以下是实现这两个功能的步骤。 1. 添加暂停功能 首先，我们需要在 model 中添加暂停音频的逻辑。 接着，在页面中添加暂停

12-3 音频播放 在本节中，我们将学习如何在 React Native 项目中实现音频播放功能。 安装依赖 React Native 官方没有内置音频播放组件，因此需要安装第三方依赖 react-n

在前面的章节中，页面的进入动画都是从右往左，退出时从左往右。然而，在频道详情页面中，页面的动画效果需要从下往上进入。 全屏模式的应用 React Navigation 提供了全屏模式来满足这一需求，允

在本章中，我们将实现频道详情模块的功能。首先，来看一下已经完成的 demo 中的频道详情页面。 功能需求 自动播放音频：进入频道详情页面时，音频会自动播放。 页面展示内容： 显示节目的标题。 显示频道

在这一章中，我们将对 react-native-tab-view 的性能进行优化，并解决频道页面的小 bug。以下是具体步骤： 一、性能优化 安装依赖 安装 CocoaPods 依赖 更新 HomeT

在这一章中，我们将学习如何使用 React Native 的手势响应系统来实现频道页面的双重滚动功能。以下是实现步骤： 一、手势响应系统概述 React Native 官方手势响应系统 React N

在这一章中，我们学习了如何使用 React Native 提供的 Animated 库来实现频道页面的动画效果。以下是动画实现的基本步骤： 动画的基础知识 步骤 1：创建动画值 Animated 提供

在这一章中，我们将完成频道页面的标签组件，分别显示简介和节目列表。以下是实现步骤： 一、创建标签组件 安装 react-native-tab-view 由于我们已经使用了 react-native-t

在这一章中，我们将完成频道信息组件的布局。以下是如何实现频道信息组件的详细步骤： 1. 设置频道页面的导航选项 2. 动态获取标题栏高度 使用 useHeaderHeight 钩子获取标题栏高度，并将

在这一章中，我们将继续完善频道模块的功能。以下是频道模块的数据结构和接口配置： 一、频道页面数据结构 频道信息组件 节目列表 作者信息 二、YAPI 接口配置 接口地址 /mock/11/bear/a