目录

ReadPageComponent (Reading Page Component)

This module provides ReadPageComponent. HarmonyOS apps can integrate this component to quickly build book reading capabilities.

Since: 5.0.4(16)

Modules to Import

import { ReadPageComponent } from '@kit.ReaderKit';

ReadPageComponent

The reading page component supports the display of book content, offers a variety of page-turning interactions and animations, and provides the progress and behavior perception capabilities required by the reader during the page-turning process.

  • This component can typeset and render book content by page based on ReaderSetting.

  • This component can adapt to different screen sizes (phones, PCs/2-in-1 devices, and tablets, in both landscape and portrait orientations). It allows users to tap or swipe to interact with the reader, and supports page turning in simulated or horizontal swipe mode as well as page turning animation.

  • This component supports the typesetting result notification capability, based on which PageDataInfo of the current page is provided by page after a book is opened or page turning is triggered.

Decorator: @Component

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.4(16).

System capability: SystemCapability.Reader.ReaderService.ReaderCore

Since: 5.0.4(16)

Parameters

Parameter Type Decorator Description
controller readerCore.ReaderComponentController - ReadPageComponent controller.
readerCallback AsyncCallback<readerCore.ReaderComponentController> - Callback function.

[h2]build

build(): void

A constructor used to create a ReadPageComponent object.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.4(16).

System capability: SystemCapability.Reader.ReaderService.ReaderCore

Since: 5.0.4(16)

Example:

import { bookParser, readerCore, ReadPageComponent } from '@kit.ReaderKit';
import { common } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Reader {
  private readerComponentController: readerCore.ReaderComponentController = new readerCore.ReaderComponentController();

  aboutToAppear(): void {
    this.init();
  }

  private async init() {
    // Initialize the book parser for the book file that has been imported to the app sandbox directory.
    let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
    let filePath: string = `${context.filesDir}/abc.epub`;
    let bookParserHandler: bookParser.BookParserHandler = await bookParser.getDefaultHandler(filePath);
    let spineList: bookParser.SpineItem[] = bookParserHandler.getSpineList();
    let spineIndex: number = spineList[0].index;
    let domPos: string = '';

    await this.readerComponentController.init(context);
    this.readerComponentController.registerBookParser(bookParserHandler);
    await this.readerComponentController.startPlay(spineIndex || 0, domPos);
    hilog.info(0x0000, 'testTag', `startPlay succeeded`);
  }

  aboutToDisappear(): void {
    this.readerComponentController.releaseBook();
  }

  build() {
    Stack() {
      ReadPageComponent({
        controller: this.readerComponentController,
        readerCallback: (err: BusinessError, data: readerCore.ReaderComponentController) => {
          this.readerComponentController = data;
        }
      })
    }.width('100%').height('100%').onClick(() => {
      // Implement the function of displaying the menu after tapping.
    })
  }
}