如何将我的图纸保存在使用本机react的文件夹中

Question

我想在设备文件夹中保存我用素描式胶水制作的图纸和笔记，但是我找不到表单，我不知道该怎么做。我已经研究并搜索了表格，但我不知道如何将其应用于该项目。我不知道我是否必须创建一个像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(;}}

但我不知道该怎么做，我不知道要添加什么来保存我的图纸

谢谢

Answer 1

来自rnsketchcanvas文档：

onsketchsaved(函数(：

可选函数，该功能2参数成功和路径。如果成功是正确的，则图像将成功保存，并且保存的图像路径可能在第二个参数中。在Android中，图像路径将始终返回。在iOS中，将图像保存到相机卷或文件系统中，路径将分别设置为NULL或图像位置。

本质上，您正在寻找存储图像的filepath。

如果将图像存储在相机卷中(路径为null(，则可以使用cameraroll API检索图像路径。

否则，您已经有了图像的文件路径。如果您想移动图像，则可以在React本机文件系统库中使用MoveFile函数(或使用Expo(如果您使用EXPO((将文件移至选择的文件夹中。

这是未经测试的代码，但应该提供一个更明显的示例，说明此过程的外观：

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,
    }
})