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

moiiocjp  于 2023-10-21  发布在  其他
关注(0)|答案(5)|浏览(113)

我一直在用Expo做一个React Native项目,它使用JSON文件来存储本地数据。我正在导入数据,如import data from '../database.json'
我正在使用data.push(new_data)对导入的JSON进行更改(添加和删除)。当我关闭应用程序时,这些更改不是持久的,因为我不知道如何保存它们。我已经看过如何使用Linux文件系统库:

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

这是通过查看API文档中的示例得出的。然而,这总是抛出promise拒绝,并没有结束写入文件。你能给我指出正确的方向吗?
另外,我应该以不同的方式导入database.json,这样我就已经有了保存它的uri了吗?

xjreopfe

xjreopfe1#

文档中没有给予一个在promise中返回props的例子,所以我忽略了它比我愿意承认的时间更长。我真的致力于弄清楚这一点,这样我就可以使用Expo解决方案,完全错过了返回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.")
  }
}
o3imoua4

o3imoua42#

请改用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'):
disho6za

disho6za3#

我发现@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);
});
czq61nw1

czq61nw14#

如果你使用AsyncStorage,它只存储小数据。可能是6MB或10MB。
您可以使用expo fileSystem

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));
        }
gjmwrych

gjmwrych5#

#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)
};

相关问题