React Native使用本地json模仿數據請求

由於後臺接口並不隨着我們的需求而隨時恭候，我們經常需要自己模擬數據，就拿ListView來說，dataSource的數據如果後臺沒有提供，我一般就選擇直接在這個文件中聲明一個數組變量，定義幾條數據就可以這種方式確實很簡單，但是寫法跟真正的網絡請求又不一樣，當真正的請求來的時候，我們需要改動的地方比較多，如下：

const data = [
  {"name" : "Melody", age: 21},
  {"name" : "ZZ", age: 22},
];


let ds = new ListView.DataSource({ 
      rowHasChanged: (r1,r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
     });
    this.state = {
      dataSource: ds.cloneWithRows(data)
    };

因爲不需要請求數據，所以直接dataSource: ds.cloneWithRows(data)，但是實際情況是怎樣呢？
假如是在進入這個頁面就有需要請求的數據：

 componentDidMount() {
    this.fetchData()
  }

fetchData() {
  fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseJson.data)
        })
      })
      .catch((error) => {
        console.error(error);
      });
}

所以在真正的網絡請求來的時候，最好的方式是我們在本地使用跟網絡請求回來類似的JSON文件，注意，這裏不是讀取JSON文件，不是用import xxx from './test.json'這種方式將JSON文件當成一個普通文件讀入，而是要當做一個接口訪問。
其實實現方式很簡單，我之前不知道React Native 是自己開啓了一個本地服務器的，所以導致我一直解決不了這個問題，運行React Native它會開啓一個本地服務器：http://localhost:8081

這個服務器是開啓在項目根路徑下的，也就是說，如果你想要 http://localhost:8081/test.json這樣訪問你的json文件，那麼將該文件放在根路徑下就可以訪問了

或者你也可以在根路徑下新建一個文件夾專門存放json文件，訪問路徑加上文件夾名字即可。
此時你的代碼看起來像這樣：

fetchData() {
  fetch('http://localhost:8081/test.json')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseJson.data)
        })
      })
      .catch((error) => {
        console.error(error);
      });
}

等到後臺人員拋出真正的接口，只需要修改請求的url就可以了。