我目前正在研究 react-native 项目并构建简单的阅读书籍应用程序。我正在使用“epubjs”和“react-native-static-server”进行本地文件访问。
在 8.0 设备以下的 android os 版本中一切正常，但在 9/10 中没有（在 ios 中一切正常）
令人沮丧的是，在开发/调试构建（assembleDebug）中，它在 android 9/10 中工作，但在安装发布构建（assembleRelease）后，它给了我空响应错误。
这是我的代码
流光组件：
import StaticServer from 'react-native-static-server';
import { MainBundlePath, DocumentDirectoryPath, readDir, readFile, stat, mkdir, exists } from 'react-native-fs';
import RNFetchBlob from "rn-fetch-blob";
import { zip, unzip, unzipAssets, subscribe } from 'react-native-zip-archive';
import { join } from "path";
const Uri = require("epubjs/lib/utils/url");
export class Streamer {
constructor(opts) {
opts = opts || {};
this.port = opts.port || "3" + Math.round(Math.random() * 1000);
this.root = opts.root || "www";
this.serverOrigin = 'file://';
this.urls = [];
this.locals = [];
this.paths = [];
this.started = false;
this.server = undefined;
}
setup() {
// Add the directory
const dirPath = join(DocumentDirectoryPath,this.root);
return exists(dirPath)
.then((exists) => {
if (!exists) {
return mkdir(dirPath);
}
})
.then(() => {
return new StaticServer(this.port, this.root, { localOnly: true });
})
.catch((e) => { console.error(e) });
}
start() {
this.started = true;
return this.setup()
.then((server) => {
this.server = server;
return this.server.start();
})
.then((url) => {
this.serverOrigin = url;
console.log(url, this.urls, this.paths);
return url;
});
}
stop() {
this.started = false;
if (this.server) {
this.server.stop();
}
}
kill() {
this.started = false;
if (this.server) {
this.server.kill();
}
}
check(bookUrl) {
const filename = this.filename(bookUrl);
const targetPath = join(DocumentDirectoryPath,this.root,filename);
return RNFetchBlob.fs.exists(targetPath);
}
get(bookUrl) {
return this.check(bookUrl)
.then((exists) => {
if (exists) {
const filename = this.filename(bookUrl);
const url = `${this.serverOrigin}/${filename}/`
console.log(url, this.urls, this.paths);
return url;
}
return this.add(bookUrl);
})
}
add(bookUrl) {
const filename = this.filename(bookUrl);
return RNFetchBlob
.config({
fileCache: true,
path: join(DocumentDirectoryPath,filename)
})
.fetch("GET", bookUrl)
.then((res) => {
const sourcePath = res.path();
const targetPath = join(DocumentDirectoryPath,this.root,filename);
const url = `${this.serverOrigin}/${filename}/`
return unzip(sourcePath, targetPath)
.then((path) => {
this.urls.push(bookUrl);
this.locals.push(url);
this.paths.push(path);
// res.flush();
return url;
})
});
}
filename(bookUrl) {
var uri = new Uri(bookUrl);
if(uri.filename && (uri.filename.indexOf("?") > -1)) {
return uri.filename.split("?")[0].split("%")[0].replace(".epub", "");
} else {
return uri.filename.replace(".epub", "");
}
}
}
这是方法：
import { Streamer } from './streamer';
import ePub, { Layout, EpubCFI, } from "epubjs";
_startStreamer = (bookUrl) => {
if (this.book) {
this.book.destroy();
}
this.book = ePub();
this.streamer = new Streamer();
return streamer.start()
.then(origin=>{
return streamer.get(bookUrl);
})
.then(src=>{
return this.book.open(src);
})
.then(()=>this.book.ready)
.then(()=>{
this.setState({toc:this.book.navigation.toc})
return this.book.navigation.toc;
})
}