react-native button調(diào)用fetch獲取數(shù)據(jù) FlatList展示

1.設(shè)置button

<Button title='click me'
                        onPress={()=>this.fetchData(this.state.start)}/>

2.fetchData函數(shù)

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({
                    //復(fù)制數(shù)據(jù)源
                    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 : 數(shù)據(jù)源
 *@renderItem : FlatList 每一項(xiàng)
 *@refreshControl : 下拉刷新
 */
<FlatList
    style={styles.flatListStyle}
    data={this.flatListData()} 
    renderItem={this.renderItem.bind(this)}
    keyExtractor={this._keyExtractor}
    refreshControl={
          <RefreshControl
                 refreshing={false}
          />
     }
/>

4.FlatList細(xì)節(jié)方面請參考:http://blog.csdn.net/sinat_17775997/article/details/72673235
http://www.lxweimin.com/p/4c1392c8669f

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 不知不覺2017年的余額已經(jīng)所剩無幾了 下面是我這一年來收藏的關(guān)于IOS開發(fā)的一些知識點(diǎn) . iOS功能 iOS ...
    臨淵還在閱讀 697評論 0 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,315評論 25 708
  • iOS功能 iOS 如何跳轉(zhuǎn)到系統(tǒng)設(shè)置里的指定子功能界面 http://blog.csdn.net/jingfa1...
    EmmaLyx閱讀 694評論 0 4
  • 我平時(shí)甚少看韓劇,近幾年口碑較好的韓劇我就只看了《繼承者們》。前段時(shí)間,看到很多關(guān)于《請回答1988》的介紹,驚覺...
    花開candy閱讀 5,240評論 29 58
  • 今天可就更忙了,連送孩子上學(xué)都沒時(shí)間,廠里按裝設(shè)備師傅們和孩子上學(xué)是同一時(shí)間段。只好讓別人幫我去送孩子上學(xué)了,謝謝...
    二年級五班崔世昊閱讀 208評論 0 0