在React Native Expo的内部存储上创建目录

Question

我在 React Native expo 项目中使用下面的两个函数来将数据存储在 json 文件中，然后将该文件存储在内部存储中。这段代码的作用是询问我是否有权存储在我选择的文件夹中，然后将文件存储在该文件夹中。但在创建文件之前它不会创建文件夹“ProjectName”。我尝试了很多方法，但无法先创建文件夹再创建文件。 所以，我需要的是它创建文件夹“ProjectName”，然后在该文件夹内创建文件。请问有人知道吗？

这是我尝试过的两个功能：

const saveJSONToFile = async (fileName, jsonData, mimetype) => {
        const directory = FileSystem.documentDirectory + 'mewiso-field/';
        const fileUri = directory + fileName + '.json';
        try {
            await FileSystem.makeDirectoryAsync(directory, { intermediates: true });
            await FileSystem.writeAsStringAsync(fileUri, JSON.stringify(jsonData));
            console.log('File URI:', fileUri);
        } catch (error) {
            console.error('Error saving JSON data:', error);
        }
        await saveFile(fileUri, fileName, mimetype);
    };
const saveFile = async (uri, filename, mimetype) => {
        if (Platform.OS === "android") {
            const permissions = await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync();
            if (permissions.granted) {
                const base64 = await FileSystem.readAsStringAsync(uri, { encoding: FileSystem.EncodingType.Base64 });
                await FileSystem.StorageAccessFramework.createFileAsync(permissions.directoryUri+'/ProjectName/', filename, mimetype)
                    .then(async (uri) => {
                        await FileSystem.writeAsStringAsync(uri, base64, { encoding: FileSystem.EncodingType.Base64 });
                    })
                    .catch(e => console.log(e));
            } else {
                await shareAsync(uri);
            }
        } else {
            await shareAsync(uri);
        }
    };

Answer 1

我尝试成功了：

import React from 'react';
import { Text, SafeAreaView, StyleSheet, TouchableOpacity } from 'react-native';
import { Card } from 'react-native-paper';
import * as FileSystem from 'expo-file-system';

export default function App() {
  const saveJSONToFile = async (fileName, jsonData, mimetype) => {
    const directory = FileSystem.documentDirectory + 'mewiso-field/ProjectName/';
    const fileUri = directory + fileName + '.json';

    try {
      // Ensure the directory exists before writing the file
      await FileSystem.makeDirectoryAsync(directory, { intermediates: true });

      // Write the JSON data to the file
      await FileSystem.writeAsStringAsync(fileUri, JSON.stringify(jsonData));

      console.log('File URI:', fileUri);

      // Save the file
      await saveFile(fileUri, fileName, mimetype);
    } catch (error) {
      console.error('Error saving JSON data:', error);
    }
  };

  const saveFile = async (uri, filename, mimetype) => {
    const permissions = await FileSystem.requestDirectoryPermissionsAsync();
    if (permissions.granted) {
      const base64 = await FileSystem.readAsStringAsync(uri, { encoding: FileSystem.EncodingType.Base64 });
      const projectNameDirectory = FileSystem.documentDirectory + 'mewiso-field/ProjectName/';

      // Check if the directory exists, if not, create it
      const directoryInfo = await FileSystem.getInfoAsync(projectNameDirectory);
      if (!directoryInfo.exists) {
        await FileSystem.makeDirectoryAsync(projectNameDirectory, { intermediates: true });
      }

      // Create the file inside the directory
      const fileUri = projectNameDirectory + filename;
      await FileSystem.writeAsStringAsync(fileUri, base64, { encoding: FileSystem.EncodingType.Base64 });
      console.log('File saved successfully:', fileUri);
    } else {
      // Handle permission denial here
    }
  };

  const handleSaveButtonPress = () => {
    const jsonData = { exampleData: 'some data' }; // Replace with your actual JSON data
    saveJSONToFile('exampleFile', jsonData, 'text/json'); // Replace filename and mimetype accordingly
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Save JSON Data to File</Text>
      <Text style={styles.description}>
        Press the button below to save the JSON data to a file on the device.
      </Text>
      <TouchableOpacity onPress={handleSaveButtonPress} style={styles.button}>
        <Text style={styles.buttonText}>Save Data</Text>
      </TouchableOpacity>
      <Card>
        {/* Your content here */}
      </Card>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 16,
  },
  description: {
    fontSize: 18,
    textAlign: 'center',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#007AFF',
    borderRadius: 5,
    padding: 16,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

在

saveJSONToFile

函数中，在确保主目录存在后，直接将JSON数据写入文件。这可确保在写入文件之前创建目录。

在

saveFile

功能中，目录创建逻辑保持不变，但文件创建逻辑进行了调整。它直接在“ProjectName”目录中创建文件并将数据写入其中。这可确保文件是在已创建的目录内创建的。