如何从 React Native 中的本地 JSON 文件中获取数据？

从本地（例如 IOS/Android 存储）获取React Native中的JSON（JavaScript 对象表示法）数据不同于从服务器获取 JSON 数据（使用Fetch或Axios ）。它需要 APP 和库的存储权限才能提供本机文件系统访问。

实施：现在让我们从实施开始：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init jsonDemo

• 第 3 步：现在进入您的项目文件夹，即 jsonDemo

  cd jsonDemo

项目结构：它将如下所示。

目录结构

示例：在 React Native 中从本地 JSON 文件中获取数据。

第 1 步：使用以下命令安装react-native-fs ：

npm install react-native-fs

注意：如果您遇到错误，例如尝试获取空数组 EUNSPECIFIED 的长度，则在 android清单文件中添加以下代码。

XML

    
    
    
      ...
    

第 2 步：创建一个名为data.json的 JSON 文件，并将其放在 android 的“/storage/emulated/0/”目录中，该目录是 android 的默认ExternalStorageDirectoryPath 。您还可以更改JSON文件的位置，但请确保存储读取文件时需要的路径。

react-native-fs文档中提到了所有可以访问的目录。

{
   "type":"Fruits",
   "example":[
       {"name":"banana"},
       {"name":"apple"},
       {"name":"orange"},
       {"name":"mango"},
       {"name":"grape"}
   ]
}

第 3 步：在App.js文件中，我们将导入react-native-fs并调用名为readFile的函数，该函数接受文件路径和编码作为参数并返回文件内容。在“/storage/emulated/0/”中，我创建了一个名为DATA的文件夹，里面是 JSON 文件。

例子：

应用程序.js

import { mapValuesSeries } from 'async';
import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
import * as RNFS from 'react-native-fs';
  
export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: null,
      fruitType: null,
    };
  }
  
  readFile = () => {
    RNFS.readFile('/storage/emulated/0/DATA/data.json', 'ascii')
      .then((res) => {
        console.log(res);
        const d = JSON.parse(res);
        this.setState({ content: res, fruitType: d.type });
      })
      .catch((err) => {
        console.log(err.message, err.code);
      });
  };
  
  render() {
    return (
      
        
           this.readFile()} />
        
         {this.state.content} 
        
          TYPE ={' '}
          {this.state.fruitType === null ? 
          'Press READ to get the type' : this.state.fruitType}
        
      
    );
  }
}
  
export default App;

使用以下命令启动服务器。

npx react-native run-android

输出：

要获取目录（例如ExternalStorageDirectory ）文件路径，我们将使用函数readDir接受目录（所有可用的目录类型请参阅react-native-fs的文档）类型作为参数并返回包含文件路径的对象数组和信息。

应用程序.js

import { mapValuesSeries } from 'async';
import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
import * as RNFS from 'react-native-fs';
  
export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: null,
      fruitType: null,
    };
  }
  
  readFile = () => {
  
    // On Android, use "RNFS.DocumentDirectoryPath"
    // (MainBundlePath is not defined)
    RNFS.readDir(RNFS.ExternalStorageDirectoryPath)
      .then((result) => {
        for (let i = 0; i < result.length; i++) {
  
          // Print the result
          console.log('GOT RESULT', result[i]);
        }
  
        // Stat the first file
        return Promise.all([RNFS.stat(result[0].path), result[0].path]);
      })
      .then((statResult) => {
        if (statResult[0].isFile()) {
  
          // If we have a file, read it
          return RNFS.readFile(statResult[1], 'utf8');
        }
        return 'no file';
      })
      .then((contents) => {
  
        // Print the file contents
        console.log(contents);
      })
      .catch((err) => {
        console.log(err.message, err.code);
      });
  };
  
  render() {
    return (
      
        Text
      
    );
  }
}
  
export default App;

参考： https://github.com/itinance/react-native-fs