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

React native 如何在react native signature capture中获取保存的签名图像,react-native,React Native,我正在安装react native signature capture,但保存后找不到图像!但是,会显示路径(/storage/emulated/0/saved_signature/signature.png),但我在文件夹或图像中都找不到任何内容!然后我想上传firestore存储中的签名,这是我的代码 import React from "react"; import { View, Text, TouchableHighlight } from "react-native"; import

我正在安装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);
从“React”导入React;
从“react native”导入{View,Text,TouchableHighlight};
从“react native signature capture”导入SignatureCapture;
从“反应本地方向”导入方向;
从“react redux”导入{connect};
从“react native firebase”导入firebase;
从“/styles”导入样式;
类签名扩展了React.Component{
构造函数(){
超级();
此.state={
路径:“
};
this.\u onSaveEvent=this.\u onSaveEvent.bind(this);
this.saveSign=this.saveSign.bind(this);
}
componentDidMount(){
方向。锁定到Landscape();
}
_onDragEvent(){
//当用户输入签名时,将调用此回调
控制台日志(“拖拽”);
}
_onSaveEvent(结果){
//result.encoded-用于base64编码的png
//result.pathName-用于文件路径名
this.setState({path:result.pathName});
log(this.state.path);
}
saveSign(){
this.sign.saveImage();
常量imageRef=firebase
.储存
.ref()
.child('P-APMTERM-LEHAV-FRAN-3/'+新日期().tolocalstring+“.png”);
imageRef.putFile(this.state.path,{contentType:“image/png”})(
“状态已更改”,
快照=>{
控制台日志(快照);
},
错误=>{
控制台错误(err);
},
uploadedFile=>{
console.log(上传文件);
}
);
}
重置符号(){
this.sign.resetImage();
}
render(){
返回(
签名捕获扩展{“}
(this.sign=input)}
onSaveEvent={this.\u onSaveEvent}
onDragEvent={this.\u onDragEvent}
SaveImageFileInxtStorage={false}
showNativeButtons={false}
showtTitleLabel={false}
viewMode={“横向”}
/>
{
这个.saveSign();
}}
>
拯救
{
这个.resetSign();
}}
>
重置
);
}
}
导出默认连接()(签名);

我正在获取路径和base64,但无论是在模拟器存储中还是在我的android手机中都找不到该图像??然后,在firebase存储中上载签名时,我收到totalbytes-1错误和状态成功?

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

当前有一个路径,但没有下载文件的
函数或读取文件的
函数。
如果要立即阅读有关该文件的信息,请使用readFile函数

readFile(path, encoding):Promise // path:string , encoding:string
编码:utf8 | base64 | ascii | uri

从“react native fetch blob”导入RNFetchBlob;
...
_onSaveEvent(结果){
//result.encoded-用于base64编码的png
//result.pathName-用于文件路径名
RNFetchBlob.fs
.writeFile(result.pathName、result.encoded、“编码类型”)
。然后(成功=>{
警惕,警惕(
“信息”,
`它已在${result.pathName}中下载`
);   })
.catch(错误=>{
控制台。警告(错误)
});
this.setState({path:result.pathName});
log(this.state.path);
}
必须设置的相应

的说明:
saveimagefileinxtstorage={true}
以便将其保存在相机卷中。

您需要将
saveimagefileinxtstorage
变量设置为
true

saveImageFileInExtStorage={true}

您需要下载该模块<代码>本地获取blob
事实上我有一个警告{“framesToPop”:1,“nativeStackAndroid”:[],“userInfo”:null,代码:eunsspecified”}我找不到函数的imageParameter数据可能不正确或编码不正确。我没有得到它?当我记录结果时,我找到了base64和pathfile,并将base64作为编码类型!那么有什么问题吗?Ps:应该使用的函数是readfile或writefile作为示例?这是路径问题