React native 从epubjs rn从CFI位置抓取文本

我目前正在做一个需要从epub抓取文本的项目

我们使用的是React Native和Futurepress epubjs rn

努力实现：

用户通过longPress在移动设备上突出显示word

突出显示的文本从突出显示的区域抓取，并在应用程序中的其他位置使用

目前的尝试： 我尝试了

onSelected

prop，它返回一个包含所选区域的CFI位置的事件，但我不知道如何从解析的CFI位置提取实际文本

在epubjs rn Github上，建议对类似问题使用onMarkClicked，但我无法触发

这是我目前的代码：

import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, Alert , WebView } from "react-native";

import { Epub } from 'epubjs-rn';

const epubCFI = require('./lib/EpubCFI/src/epubcfi');   

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    onLongPress = (event) => {
        console.log("epubCFI.prototype.parse(): " , epubCFI.prototype.parse(event));
        console.log("epubCFI.prototype.getRange(): ", epubCFI.prototype.getRange(event));
    }

    selectText = (event, rendition) => {
        console.log('event', event);

        const parsedEvent = epubCFI.prototype.parse(event);
    }

    render() {

        return (
        <Epub onSelected={(event, rendition) => this.selectText(event, rendition)} 
            onLongPress={this.onLongPress.bind(this)} 
            src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
            flow="scrolled" />
        )
    }
}

从“React”导入React；
从“react native”导入{样式表、文本、视图、TouchableHighlight、Alert、WebView}；
从'epubjs rn'导入{Epub}；
const epubCFI=require（'./lib/epubCFI/src/epubCFI'）；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
}
onLongPress=（事件）=>{
log（“epubCFI.prototype.parse（）：”，epubCFI.prototype.parse（事件））；
log（“epubCFI.prototype.getRange（）：”，epubCFI.prototype.getRange（事件））；
}
选择文本=（事件、格式副本）=>{
console.log（'event'，event）；
const parsedEvent=epubCFI.prototype.parse（事件）；
}
render（）{
返回(
选择文本（事件、格式副本）}
onLongPress={this.onLongPress.bind（this）}
src={”https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
flow=“滚动”/>
)
}
}

---

任何帮助都将不胜感激。谢谢~

您可以使用此代码获取所选内容的文本

    onSelected={(cfiRange, rendition) => {
      console.log("selected", cfiRange)
      this.state.book.getRange(cfiRange).then(function(range) {
        console.log(`Text: ${range.endContainer.data.substring(range.startOffset, range.endOffset)}`);
      });
    }}

对于book

state

而言，在该代码中也设置：

  onReady={(book) => {
                        console.log("Metadata", book.package.metadata);
                        console.log("Table of Contents", book.navigation.toc);
                        this.setState({
                            onChangeFirstCall: true,
                            title: book.package.metadata.title,
                            toc: book.navigation.toc,
                            book: book
                        });

---

你的密码在哪里？我已经用我的密码更新了~谢谢你的回答！但是，当我调用

getRange（）

：

找不到epubcfi（/6/6[fm01]！/4/2/2[title1]/12、/1:0、/1:6）的startContainer时，我遇到了一个错误。

并且为range返回的值为null。。。你知道哪里出了问题吗？你是否先设置了图书状态？我编辑了答案。请检查一下。我希望这就是你的答案：）谢谢你的回复@Meisam Saba！是的，我在onReady函数中首先设置了书本。。。