如何在 react-native-signature-capture 中获取保存的签名图像

Question

我只是安装 react-native-signature-capture 但保存后找不到图像！但是，显示了路径（/storage/emulated/0/saved_signature/signature.png'），但我找不到任何文件夹或图像！然后我想将签名上传到firestore存储中，这是我的代码！！

import React from "react";
import { View, Text, TouchableHighlight } from "react-native";
import SignatureCapture from "react-native-signature-capture";
import Orientation from "react-native-orientation";
import { connect } from "react-redux";
import firebase from "react-native-firebase";
import styles from "./styles";

class Signature extends React.Component {
constructor() {
super();
this.state = {
path: ""
};
this._onSaveEvent = this._onSaveEvent.bind(this);
this.saveSign = this.saveSign.bind(this);
}

componentDidMount() {
Orientation.lockToLandscape();
}
_onDragEvent() {
// This callback will be called when the user enters signature
console.log("dragged");
}
_onSaveEvent(result) {
//result.encoded - for the base64 encoded png
//result.pathName - for the file path name
this.setState({ path: result.pathName });
console.log(this.state.path);
}
saveSign() {
this.sign.saveImage();
const imageRef = firebase
.storage()
.ref()
.child('P-APMTERM-LEHAV-FRAN-3/'+ new Date().toLocaleString+".png");
imageRef.putFile(this.state.path, { contentType: "image/png" }).on(
"state_changed",
snapshot => {
console.log(snapshot);
},
err => {
console.error(err);
},
uploadedFile => {
console.log(uploadedFile);
}
);
}

resetSign() {
this.sign.resetImage();
}
render() {
return (
<View style={{ flex: 1, flexDirection: "column" }}>
<Text style={{ alignItems: "center", justifyContent: "center" }}>
Signature Capture Extended{" "}

<SignatureCapture
style={[{ flex: 1 }, styles.signature]}
ref={input => (this.sign = input)}
onSaveEvent={this._onSaveEvent}
onDragEvent={this._onDragEvent}
saveImageFileInExtStorage={false}
showNativeButtons={false}
showTitleLabel={false}
viewMode={"landscape"}
/>

    <View style={{ flex: 1, flexDirection: "row" }}>
      <TouchableHighlight
        style={styles.buttonStyle}
        onPress={() => {
          this.saveSign();
        }}
      >
        <Text>Save</Text>
      </TouchableHighlight>

      <TouchableHighlight
        style={styles.buttonStyle}
        onPress={() => {
          this.resetSign();
        }}
      >
        <Text>Reset</Text>
      </TouchableHighlight>
    </View>
  </View>
);
}
}

export default connect()(Signature);

我正在获取路径和 base64，但我在模拟器存储或我的 android 手机中都找不到图像？？那么在firebase存储中上传签名时，我得到totalbytes -1的错误和状态成功？

Answer 1

你必须设置：

saveImageFileInExtStorage={true} 以便将其保存在相机胶卷中。

Answer 2

使用“react-native-fetch-blob”将图片文件放在设备文件夹中。

当前有路径，但没有function to download 文件或function to read 文件。 如果您想立即阅读文件，请使用 readFile 函数。

readFile(path, encoding):Promise // path:string , encoding:string

编码：utf8 | base64 | ASCII |乌里

import RNFetchBlob from "react-native-fetch-blob";
...
_onSaveEvent(result) {
//result.encoded - for the base64 encoded png
//result.pathName - for the file path name
RNFetchBlob.fs
    .writeFile(result.pathName, result.encoded, "encoding type")
    .then(success => {
      Alert.alert(
            "info",
            `It's been downloaded in ${result.pathName}.`
          );   })
    .catch(err => {
      console.warn(err)
    });
this.setState({ path: result.pathName });
console.log(this.state.path);
}

对应module的描述

Answer 3

您需要将saveImageFileInExtStorage 变量设置为true：

saveImageFileInExtStorage={true}