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

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

当前存在路径，但是没有function to download文件或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);
}

相应的module

的说明

Answer 2

我也在努力使用该库，看起来对于iOS来说工作正常，但是在Android中，图像不在指定的路径上，回购中的很多人都在谈论使用外部存储，但是我没有设法做到这一点工作呢。此外，不仅仅是路径，我从Android中的Save接收到的编码与从iOS中获得的编码也有所不同，它看起来不像base64。

如果有人设法使其适用于Android，并且可以分享一个示例，我将不胜感激。

Answer 3

您必须设置：

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

Answer 4

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

saveImageFileInExtStorage={true}

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

4 个答案:

您必须设置：