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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/DemoKui/article/details/79960116

转载请注明出处: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 √

阅读更多

没有更多推荐了,返回首页