我想将用素描画布制作的图纸和笔记保存在设备文件夹中，但是找不到表格，我不知道该怎么做。 我已经研究并搜索了表格，但是我不知道如何将其应用于该项目。 我不知道是否必须创建一个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 = {{成功，filePath）=> {警告（'filePath：'+ filePath）; }}
但是我不知道该怎么做，不知道要添加些什么来将我的图纸保存在Android上
谢谢
答案 0 :(得分：2)
从RNSketchCanvas文档中：
onSketchSaved（功能）：
一个可选函数，可容纳2个参数成功和路径。如果成功为真，则图像成功保存，并且保存的图像路径可能在第二个参数中。在Android中，将始终返回图像路径。在iOS中，图像会保存到相机胶卷或文件系统中，路径将分别设置为null或图像位置。
本质上，您正在寻找存储图像的文件路径。
如果图像存储在相机胶卷中（路径为空），则可以使用CameraRoll api来检索图像路径。
否则，您已经具有该图像的文件路径。如果您随后要移动图像，则可以使用React Native File System library（或FileSystem API，如果使用的是Expo）中的moveFile函数将文件移动到您选择的文件夹中。
这是未经测试的代码，但应提供一个更具体的示例说明此过程的外观：
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,
}
})