由于后台接口并不随着我们的需求而随时恭候，我们经常需要自己模拟数据，就拿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
2017-06-01_194033.jpg
这个服务器是开启在项目根路径下的，也就是说，如果你想要
http://localhost:8081/test.json这样访问你的json文件，那么将该文件放在根路径下就可以访问了
2017-06-01_194259.jpg
或者你也可以在根路径下新建一个文件夹专门存放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就可以了。
网友评论