如何将我的图纸保存在带有本机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 ={(成功，filePath) => {告警('filePath:‘+ filePath)；}

但是我不知道该怎么做，我不知道该添加什么来保存我在Android上的绘图。

谢谢

Answer 1

来自RNSketchCanvas文档：

onSketchSaved (功能)： 一个可选的函数，它指控两个参数成功和路径。如果成功为真，则成功保存图像，保存的图像路径可能在第二个参数中。在Android系统中，图像路径将始终被返回。在iOS中，将图像保存到相机滚动或文件系统中，路径将分别设置为null或图像位置。

本质上，您正在寻找存储图像的文件路径。

如果图像存储在相机卷中(路径为空)，则可以使用CameraRoll api检索图像路径。

否则，您已经有了图像的文件路径。如果您想要移动映像，可以使用反应本机文件系统库中的反应本机文件系统库函数(如果使用FileSystem )将文件移动到您选择的文件夹中。

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

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