如何使用Expo文件系统保存导入的JSON文件

Question

我一直在与 Expo 合作开发一个 React Native 项目，该项目使用 json 文件来存储本地数据。我像这样导入数据

import data from '../database.json'

我正在使用

data.push(new_data)

对导入的 JSON 进行更改（添加和删除）。当我关闭应用程序时，这些更改不会持久，因为我不知道如何保存它们。我已经研究过如何使用 expo-file-system 库：

import * as FileSystem from 'expo-file-system';
...
FileSystem.writeAsStringAsync(FileSystem.documentDirectory + 'database.json', data);

这是查看 API 文档中的示例。然而，这总是会抛出承诺拒绝并且最终不会写入文件。你能指出我正确的方向吗？

另外，我是否应该以不同的方式导入database.json，以便我已经有了将其保存到的uri？

Answer 1

文档没有给出承诺中返回的 props 的示例，所以我忽略它的时间比我愿意承认的还要长。我真的致力于解决这个问题，以便我可以使用 Expo 解决方案，并且完全错过了 createFileAsync 的return Promise，所以希望这可以在将来为某人节省大量时间。

import * as FileSystem from 'expo-file-system';
const { StorageAccessFramework } = FileSystem;

const saveFile = async () => {
  const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();
  // Check if permission granted
  if (permissions.granted) {
    // Get the directory uri that was approved
    let directoryUri = permissions.directoryUri;
    let data = "Hello World";
    // Create file and pass it's SAF URI
    await StorageAccessFramework.createFileAsync(directoryUri, "filename", "application/json").then(async(fileUri) => {
      // Save data to newly created file
      await FileSystem.writeAsStringAsync(fileUri, data, { encoding: FileSystem.EncodingType.UTF8 });
    })
    .catch((e) => {
      console.log(e);
    });
  } else {
    alert("You must allow permission to save.")
  }
}

Answer 2

使用 AsyncStorage 代替。 React Native 包已弃用但可以使用，或者使用 @react-native-community/async-storage 并将 json 转换为字符串（AsyncStorage 只能存储字符串）

设置项目

import AsyncStorage from '@react-native-community/async-storage';
...
await AsyncStorage.setItem('myData', JSON.stringify(data))

获取物品

const data = await AsyncStorage.getItem('myData'):

Answer 3

我发现@JayMax 的回答非常有帮助，但它仅适用于 Android。 在 iOS 上，您只需使用

Sharing.shareAsync

即可将数据保存到文件中。检查这个例子：

const fileUri = FileSystem.documentDirectory + 'data.txt';

FileSystem.writeAsStringAsync(fileUri, 'here goes your data from JSON. You can stringify it :)', {
  encoding: FileSystem.EncodingType.UTF8,
});

const UTI = 'public.text';

Sharing.shareAsync(fileUri, {UTI}).catch((error) => {
  console.log(error);
});

Answer 4

如果您使用AsyncStorage，它仅存储小数据。也许 6mb 或 10mb。

您可以使用expo文件系统

import * as FileSystem from 'expo-file-system';
...
FileSystem.writeAsStringAsync(FileSystem.documentDirectory + 'database.json', data);

转换您的数据（将 json 类型转换为字符串）例如：

  writeData = async () => {
          var persons = ''
          await axios.get(`http://192.168.0.48:4000/api/sql/student`)
          .then(res => {
            persons = res.data
          })
          await FileSystem.writeAsStringAsync(FileSystem.documentDirectory + `offline_queue_stored.json`, JSON.stringify(persons));
        }

Answer 5

#1.如果 JSON 文件位于您的项目文件夹中（PC/笔记本电脑）

import data from './database.json';

#2。如果 JSON 文件在您的手机中

import * as FileSystem from 'expo-file-system';
import * as DocumentPicker from 'expo-document-picker';

this.state = {
        fileURI: null,
    };

componentDidMount = () =>{
    this._pickDocument();
}
_pickDocument = async () => {
    let result = await DocumentPicker.getDocumentAsync({});
    this.setState({
        fileURI: result.uri
    })
    let fileData = await FileSystem.readAsStringAsync(this.state.fileURI)
    console.log(fileData)
};