React-Native 访问本地 json 文件微技巧

转载请注明出处：https://blog.csdn.net/demokui/article/details/79960116

一、使用场景

相信大多开发人员平时私下里也做一些自己的项目或者练习的 demo，有时候要用到网络数据，但是，对于像我这样不太懂后台的开发，同时又懒得搭建 TomCat 的人，绝杀技无非就是在本地创建一个 json 文件，然后在访问网络的时候 URL 写成本地 json 文件的绝对路径，然后去读取数据就好了，相对来说是很容易的一个方法。

但是，在 React-Native 中这样的方法行不通了，虽然在 RN 中用的是 ReactJS，说白了就是前端开发，按理说这样应该是不会错的，不相信现实的我试了 n 多次还是失败，用了不同的访问网络方式依旧不行。

二、寻找解决方案

第一种方法：

起初在网上找了很久，大多都是类似 Web 前端开发时的方法（也许是我没有把搜索引擎使用到极致…），后来突然想到，在我每次运行程序时 #react-native run-android 都会自启动 node_modules 的包管理器。

这是 Facebook RN 团队的设计，运行程序时包管理器必须运行在后台，这样调试程序时相对效率会很高，这个包管理器里面将我们常用的组件提前加载好了，供我们随时调用，前提是必须跑在后台，RN 团队开发时给这个服务默认的端口号是 8081。

既然这个端口是专门留给该项目的，那么，该项目中的每个文件按道理是都可以访问到的，于是我尝试了:

const url = ‘http://localhost:8081/newlist.json‘;

我在项目根目录下面放了一个 newlist.json 文件，然后将包管理器启动起来，运行程序一气呵成，成功了，就这么简单。

---

第二种方法：

使用导入的方式读取本地 json 文件：

import newlist from’../../newlist.json’

而此时 newlist 就是一个实例对象，直接取数据就可以了。这个方法相对来说更加简单，都不用走访问网络的方法，练习的时候更加的高效、便捷。伪代码如下：

newlist.json 文件

{
  "msg": "success",
  "result": {
    "stat": "1",
    "news_data": [
      {
        "id": "01",
        "title": "杨幂的发际线再也回不去了么？网友吐槽像半秃",
        "date": "2017-01-05 11:03",
        "category": "yule",
        "author_name": "腾讯娱乐",
        "url": "http://mini.eastday.com/mobile/170105110355287.html?qid=juheshuju",
        "pic":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523263433771&di=69de72629c923496ba4efd58d301e62d&imgtype=0&src=http%3A%2F%2Fp1.meituan.net%2Fdeal%2F816b8c1664ef6ddad2d2c991d10ad1e3165800.jpg"
      },
      {
        "id": "02",
        "title": "中企对美投资降三成，美加码设限损及自身",
        "date": "2018-04-12 10:03",
        "category": "yule",
        "author_name": "36氪独家",
        "url": "http://mini.eastday.com/mobile/170105110355287.html?qid=juheshuju",
        "pic":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523263433771&di=69de72629c923496ba4efd58d301e62d&imgtype=0&src=http%3A%2F%2Fp1.meituan.net%2Fdeal%2F816b8c1664ef6ddad2d2c991d10ad1e3165800.jpg"
      }
    ]
  }
}

组件中使用时候的代码片段：

......
import newlist from'../../newlist.json';
......
// 打印数据看看结果
console.log("newlist:"+newlist.result.news_data[0].author_name);

打印结果如下图：

ok ，到此两种读取本地 json 文件已经记录完毕。get √