由于后台接口并不随着我们的需求而随时恭候,我们经常需要自己模拟数据,就拿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就可以了。