我想在设备文件夹中保存我用sketch-canvas制作的图纸和笔记,但我找不到表格,我不知道该怎么做。我已经研究并搜索了表格,但我不知道如何将它应用于这个项目。我不知道是否必须像facebook文档那样创建一个模块
import React, { Component } from 'react'
import {
Platform,
StyleSheet,
Text,
View,
Alert,
} from 'react-native'
import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas'
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<RNSketchCanvas
containerStyle={{ backgroundColor: 'transparent', flex: 1 }}
canvasStyle={{ backgroundColor: 'transparent', flex: 1 }}
defaultStrokeIndex={0}
defaultStrokeWidth={5}
closeComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Cerrar</Text></View>}
undoComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Deshacer</Text></View>}
clearComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Limpiar</Text></View>}
eraseComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Borrador</Text></View>}
strokeComponent={color => (
<View style={[{ backgroundColor: color }, styles.strokeColorButton]} />
)}
strokeSelectedComponent={(color, index, changed) => {
return (
<View style={[{ backgroundColor: color, borderWidth: 2 }, styles.strokeColorButton]} />
)
}}
strokeWidthComponent={(w) => {
return (<View style={styles.strokeWidthButton}>
<View style={{
backgroundColor: 'white', marginHorizontal: 2.5,
width: Math.sqrt(w / 3) * 10, height: Math.sqrt(w / 3) * 10, borderRadius: Math.sqrt(w / 3) * 10 / 2
}} />
</View>
)}}
saveComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Save</Text></View>}
savePreference={() => {
return {
folder: 'RNSketchCanvas',
filename: String(Math.ceil(Math.random() * 100000000)),
transparent: false,
imageType: 'png'
}
}}
//onSketchSaved={(success, filePath) => { alert('filePath: ' + filePath); }}
/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
headerText: {
fontSize: 5,
textAlign: "center",
margin: 10,
fontWeight: "bold"
},
strokeColorButton: {
marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
},
strokeWidthButton: {
marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#39579A'
},
functionButton: {
marginHorizontal: 2.5, marginVertical: 8, height: 30, width: 60,
backgroundColor: '#39579A', justifyContent: 'center', alignItems: 'center', borderRadius: 5,
}
})
您不应该创建数据库。在这个简单的应用程序中,有一行将用于保存,但我不知道如何使用它。我告诉你我的代码。你能告诉我应该怎样或在哪里开始吗?编辑:
我认为这是我应该用来保存创建的气泡的线:
// onSketchSaved = {(success,filePath)=> {alert('filePath:'+ filePath); }}
但我不知道怎么做,我不知道要添加什么来保存我的Android图纸
谢谢
从RNSketchCanvas文档:
onSketchSaved(函数):
一个可选函数,它接受2个参数成功和路径。如果成功,则成功保存图像,保存的图像路径可能位于第二个参数中。在Android中,将始终返回图像路径。在iOS中,图像保存到相机胶卷或文件系统,路径将分别设置为空或图像位置。
基本上,您正在寻找存储图像的文件路径。
如果图像存储在相机胶卷中(路径为空),则可以使用CameraRoll api检索图像路径。
否则,您已有图像的文件路径。如果您想移动图像,可以使用React Native File System library中的moveFile函数(如果使用Expo,则使用FileSystem API)将文件移动到您选择的文件夹中。
这是未经测试的代码,但应该提供一个更明确的示例,说明此过程的外观:
import React, {Component} from 'react'
import {StyleSheet, Text, View, CameraRoll} from 'react-native'
import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas'
import RNFS from 'react-native-fs';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<RNSketchCanvas
containerStyle={{ backgroundColor: 'transparent', flex: 1 }}
canvasStyle={{ backgroundColor: 'transparent', flex: 1 }}
defaultStrokeIndex={0}
defaultStrokeWidth={5}
closeComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Cerrar</Text></View>}
undoComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Deshacer</Text></View>}
clearComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Limpiar</Text></View>}
eraseComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Borrador</Text></View>}
strokeComponent={color => (
<View style={[{ backgroundColor: color }, styles.strokeColorButton]} />
)}
strokeSelectedComponent={(color, index, changed) => {
return (
<View style={[{ backgroundColor: color, borderWidth: 2 }, styles.strokeColorButton]} />
)
}}
strokeWidthComponent={(w) => {
return (<View style={styles.strokeWidthButton}>
<View style={{
backgroundColor: 'white', marginHorizontal: 2.5,
width: Math.sqrt(w / 3) * 10, height: Math.sqrt(w / 3) * 10, borderRadius: Math.sqrt(w / 3) * 10 / 2
}} />
</View>
)}}
saveComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Save</Text></View>}
savePreference={() => {
return {
folder: 'RNSketchCanvas',
filename: String(Math.ceil(Math.random() * 100000000)),
transparent: false,
imageType: 'png'
}
}}
onSketchSaved={this.onSave}
/>
</View>
</View>
)
}
onSave = async (success, path) => {
if(!success) return;
let imageUri;
const myNewImagePath = RNFS.DocumentDirectoryPath + 'my_folder'
try{
if(path == null){
// image has been saved to the camera roll
// Here I am assuming that the most recent photo in the camera roll is the saved image, you may want to check the filename
const images = await CameraRoll.getPhotos({first: 1});
if(images.length > 0){
imageUri = [0].image.uri;
}else{
console.log('Image path missing and no images in camera roll')
return;
}
} else{
imageUri = path
}
await RNFS.moveFile(imageUri, myNewImagePath)
} catch (e) {
console.log(e.message)
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
headerText: {
fontSize: 5,
textAlign: "center",
margin: 10,
fontWeight: "bold"
},
strokeColorButton: {
marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
},
strokeWidthButton: {
marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#39579A'
},
functionButton: {
marginHorizontal: 2.5, marginVertical: 8, height: 30, width: 60,
backgroundColor: '#39579A', justifyContent: 'center', alignItems: 'center', borderRadius: 5,
}
})