如何在 react-native-signature-capture 中獲取保存的簽名圖像

Question

我只是在安裝 react-native-signature-capture 但我在保存后找不到圖像！ 但是，顯示路徑（/storage/emulated/0/saved_signature/signature.png'）但我找不到任何文件夾或圖像！ 然后我想在 firestore Storage 中上傳簽名，這是我的代碼！！

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或function to read文件的function to read 。 如果您想立即閱讀該文件，請使用 readFile 函數。

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

編碼：utf8 | base64 | ASCII | uri

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);
}

對應模塊說明

Answer 3

我也在該庫中苦苦掙扎，看起來對於iOS來說工作正常，但是在Android中，該圖像不在給定的路徑中，許多回購中的人都在談論使用外部存儲，但是我還沒有設法使它正常工作。 此外，不僅僅是路徑，我從Android中的Save接收到的編碼與從iOS中獲得的編碼也有所不同，它看起來不像base64。

如果有人設法使其適用於Android，並且可以分享一個示例，我將不勝感激。

Answer 4

您需要將saveImageFileInExtStorage變量設置為true ：

saveImageFileInExtStorage={true}