我只是安装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的错误和状态成功吗?
答案 0 :(得分:0)
使用'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
的说明答案 1 :(得分:0)
我也在努力使用该库,看起来对于iOS来说工作正常,但是在Android中,图像不在指定的路径上,回购中的很多人都在谈论使用外部存储,但是我没有设法做到这一点工作呢。此外,不仅仅是路径,我从Android中的Save接收到的编码与从iOS中获得的编码也有所不同,它看起来不像base64。
如果有人设法使其适用于Android,并且可以分享一个示例,我将不胜感激。
答案 2 :(得分:0)
saveImageFileInExtStorage={true}
以便保存在相机胶卷中。
答案 3 :(得分:0)
您需要将saveImageFileInExtStorage
变量设置为true
:
saveImageFileInExtStorage={true}