react-native button调用fetch获取数据 FlatList展示

1.设置button

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 : 下拉刷新
 */

     }
/>

4.FlatList细节方面请参考:http://blog.csdn.net/sinat_17775997/article/details/72673235
http://www.jianshu.com/p/4c1392c8669f

你可能感兴趣的:(react-native button调用fetch获取数据 FlatList展示)