React Native中如何获取epub.js准确总页数？book.locations返回信息不符

核心问题原因 #

book.locations.generate()是基于固定字符数做静态分页，完全不考虑移动端的屏幕尺寸、字体大小、行高这些实际渲染因素，所以必然和屏幕显示的真实页数不一致。要获取准确的视图分页及对应CFI，必须依赖阅读器实例的动态分页API。

解决方法 #

放弃使用book.locations，改用epub.js阅读器实例的视图相关API，步骤如下：

1. 获取阅读器实例引用
   在React Native中使用epubjs-react-native的EpubReader组件时，通过ref获取阅读器实例，确保在阅读器就绪后操作。

2. 调用getPages()获取真实分页
   该方法会根据当前视图的渲染状态，返回包含每一页CFI范围的数组，完全匹配屏幕显示的页数。

3. 监听渲染事件更新分页
   当用户调整字体、旋转屏幕时，分页会变化，通过onRendered事件触发重新获取分页数据。

代码示例 #

import { EpubReader } from 'epubjs-react-native';

const EpubViewer = () => {
  let readerRef = null;

  // 阅读器就绪后初始化分页获取
  const handleReaderReady = (reader) => {
    readerRef = reader;
    fetchActualPages();
  };

  // 获取真实分页及对应CFI
  const fetchActualPages = async () => {
    if (!readerRef) return;
    const pages = await readerRef.getPages();
    console.log('实际总页数:', pages.length);
    console.log('每页CFI信息:', pages.map(page => ({
      页码: page.index + 1,
      起始CFI: page.start,
      结束CFI: page.end
    })));
  };

  // 页面渲染更新时重新获取分页
  const handleRendered = () => {
    fetchActualPages();
  };

  // 获取当前显示页的CFI
  const getCurrentPageCFI = () => {
    if (!readerRef) return;
    const currentLoc = readerRef.getCurrentLocation();
    console.log('当前页CFI:', currentLoc.start);
  };

  return (
    <EpubReader
      ref={(ref) => readerRef = ref}
      source="your-book-path.epub"
      onReady={handleReaderReady}
      onRendered={handleRendered}
    />
  );
};

export default EpubViewer;

关键API说明 #

• getPages()：返回数组，每个元素包含start（页起始CFI）、end（页结束CFI）、index（页码索引，从0开始），完全对应屏幕渲染的分页。
• getCurrentLocation()：返回当前显示页面的CFI位置及页码信息，适合跟踪用户阅读位置。

内容的提问来源于stack exchange，提问作者anne.script