javascript-如何使用本机反应将我的工程图保存在文件夹中？
作者：互联网
我想将用草图画布制作的图纸和注释保存在设备文件夹中,但是找不到表格,我不知道该怎么做.
我已经研究并搜索了表格,但是我不知道如何将其应用于该项目.
我不知道是否必须创建一个像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)=> {alert(‘filePath：’filePath); }}
但我不知道该怎么做,我不知道要添加什么以将我的图形保存到Android
谢谢
解决方法:
从RNSketchCanvas文档中：
onSketchSaved (function):
An optional function which accpets 2 arguments success and path. If success is true, image is saved successfully and the saved image path might be in second argument. In Android, image path will always be returned. In iOS, image is saved to camera roll or file system, path will be set to null or image location respectively.
本质上,您正在寻找存储图像的文件路径.
如果图像存储在相机胶卷中(路径为空),则可以使用CameraRoll api检索图像路径.
否则,您已经有该图像的文件路径.如果随后要移动图像,则可以使用React Native File System library(如果使用的是Expo,则为FileSystem API)中的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,
}
})
标签：react-native,javascript 来源： https://codeday.me/bug/20191210/2104864.html