一、使用場景

相信大多開發人員平時私下裡也做一些自己的專案或者練習的 demo，有時候要用到網路資料，但是，對於像我這樣不太懂後臺的開發，同時又懶得搭建 TomCat 的人，絕殺技無非就是在本地建立一個 json 檔案，然後在訪問網路的時候 URL 寫成本地 json 檔案的絕對路徑，然後去讀取資料就好了，相對來說是很容易的一個方法。

但是，在 React-Native 中這樣的方法行不通了，雖然在 RN 中用的是 ReactJS，說白了就是前端開發，按理說這樣應該是不會錯的，不相信現實的我試了 n 多次還是失敗，用了不同的訪問網路方式依舊不行。

二、尋找解決方案

第一種方法：

起初在網上找了很久，大多都是類似 Web 前端開發時的方法（也許是我沒有把搜尋引擎使用到極致…），後來突然想到，在我每次執行程式時 #react-native run-android 都會自啟動 node_modules 的包管理器。

既然這個埠是專門留給該專案的，那麼，該專案中的每個檔案按道理是都可以訪問到的，於是我嘗試了:

我在專案根目錄下面放了一個 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 √