react-native button调用fetch获取数据 F
2017-07-20 本文已影响0人
向前Hell
1.设置button
<Button title='click me'
onPress={()=>this.fetchData(this.state.start)}/>
2.fetchData函数
fetchData(){
/*
*@urlPath:'url地址'
*@params:'key[0]=value[0]&key[1]=value[1]...'
*/
... other code ...
let myRequest = new Request(urlPath,{
method:'POST',
headers:{
'Content-Type': 'application/x-www-form-urlencoded',
},
body:params,
});
fetch(myRequest)
.then((response)=>response.json())
.then((responseData)=>{
// console.log(responseData);
// console.log(responseData[0]);
// console.log(this.state.dataArray);
// console.log(this.state.start);
let data = responseData;
// console.log(data);
let dataBlob = this.state.dataArray;
let i = 10*(this.state.start-1);
data.map((item) => {
dataBlob.push({
key: i,
value: item,
});
i++;
});
// console.log(dataBlob);
this.setState({
//复制数据源
dataArray: dataBlob,
isLoading: false,
start:this.state.start+1,
});
// console.log(this.state.dataArray);
})
.catch((error) => {
console.error(error);
Alert.alert("error!");
});
}
3.FlatList属性
/*
*@data : 数据源
*@renderItem : FlatList 每一项
*@refreshControl : 下拉刷新
*/
<FlatList
style={styles.flatListStyle}
data={this.flatListData()}
renderItem={this.renderItem.bind(this)}
keyExtractor={this._keyExtractor}
refreshControl={
<RefreshControl
refreshing={false}
/>
}
/>
4.FlatList细节方面请参考:http://blog.csdn.net/sinat_17775997/article/details/72673235
http://www.jianshu.com/p/4c1392c8669f