epubjs - 反应 - 内生

一个数字读取器,使用.opf.epub格式,在网页视图内使用epub.js库进行本地反应.

安装

npm install @epubjs-react-native/core

yarn add @epubjs-react-native/core

根据您想要应用此库的工程类型, 遵循以下步骤 :

零安装

npm install @epubjs-react-native/file-system react-native-fs react-native-webview react-native-gesture-handler

yarn add @epubjs-react-native/file-system react-native-fs react-native-webview react-native-gesture-handler

展览安装

npx expo install @epubjs-react-native/expo-file-system react-native-fs react-native-webview react-native-gesture-handler

如果您为 iOS 开发, 请使用此命令安装 CocoaPods 道口( 如果您使用 expo 管理的项目, 您不需要此)

在您的 ios 项目文件夹中运行 :

npx pod-install

对于赤子反应本地项目,请添加以下权限: Info.plist数字 :

<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>

使用量

在 Reader Provider 中包入您的根组件 。 如果你有一个香草 React Industrial 的项目,一个好主意是把它添加到被传递到 App Registry 的组件中. 编译器。 这通常会出现在index.js文件中. 如果有会展项目,可以在App.js文件中的导出组件内完成.

import * as React from 'react';
import { AppRegistry } from 'react-native';
import { ReaderProvider } from '@epubjs-react-native/core';
import { name as appName } from './app.json';
import App from './src/App';

export default function Main() {
  return (
    <ReaderProvider>
      <App />
    </ReaderProvider>
  );
}

AppRegistry.registerComponent(appName, () => Main);

这个 <ReaderProvider> 构成部分提供 <Reader> 框架所有组成部分的操作方法. 没有这个 useReader 钩子不通.

在上述步骤之后,您可以将阅读器初始化如下:

import * as React from 'react';

import { SafeAreaView } from 'react-native';
import { Reader, useReader } from '@epubjs-react-native/core';
// import { useFileSystem } from '@epubjs-react-native/file-system'; // for Bare React Native project
// import { useFileSystem } from '@epubjs-react-native/expo-file-system'; // for Expo project

export default function App() {
  const { goToLocation } = useReader();
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Reader
        src="https://s3.amazonaws.com/moby-dick/OPS/package.opf"
        fileSystem={useFileSystem}
      />
    </SafeAreaView>
  );
}

阅读器参数

钩子

使用读取器

useReader() 是一个定制的钩子,它将返回所有书的状态和帮助你的方法. 确定您在阅读器中使用

const { changeFontSize, goToLocation, ... } = useReader();

方法

国家

• theme: 含有主题的对象.
• key: 工作如书上独有的ID.
• atStart:表示是否在书的开头.
• atEnd:表示是否在书尾.
• currentLocation:本作目前的位置.
• totalLocations: 地点总数.
• progress:本作的进展.
• isLoading:表示书是否在装入.
• searchResults: 搜索结果.
• meta:包含本作元数据的对象.
• annotations:包含本作注释的数组.
• section:本作目前一节(章节).
• toc: 也叫目录,是一份命令内容链接列表.
• landmarks: 包含一系列主要内容
• bookmarks: 包含书签的数组.
• isBookmarked:显示当前位置是否为书签.

这个 meta 对象包含:

• 覆盖 (字符串、 矩阵缓冲、 无效或未定义):书的封面图像 e.g.data:image/jpeg;base64,/9j/4AAQSkZJ...
• 作者 (弦声): 该书的创作者/作者姓名 e.g. Herman Melville
• 标题 (弦声): 该书的标题 e.g. Moby-Dick
• 说明 (弦声):本作的描述/摘要.
• 语言 (弦声) : 该书的语言 e.g. en-US
• 出版社 (弦声):"电子书"出版社 e.g. Harper & Brothers, Publishers
• 权利 (弦声): 该书的权利 e.g. This work is shared with the public using the Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license.

实例

• 您可以在这里看到实例演示

• 在 Expo 项目上运行的实例

• 在裸体反应原生项目上运行的实例

你喜欢这个项目吗? 考虑 赞助 计划要保持活力

许可证

麻省理工学院