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é)方面請(qǐng)參考:http://blog.csdn.net/sinat_17775997/article/details/72673235
http://www.reibang.com/p/4c1392c8669f

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市涕侈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌笔横,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,386評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咐吼,死亡現(xiàn)場(chǎng)離奇詭異吹缔,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)锯茄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門厢塘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人肌幽,你說我怎么就攤上這事晚碾。” “怎么了喂急?”我有些...
    開封第一講書人閱讀 164,704評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵格嘁,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我廊移,道長(zhǎng)糕簿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,702評(píng)論 1 294
  • 正文 為了忘掉前任狡孔,我火速辦了婚禮懂诗,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘苗膝。我一直安慰自己殃恒,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評(píng)論 6 392
  • 文/花漫 我一把揭開白布荚醒。 她就那樣靜靜地躺著芋类,像睡著了一般。 火紅的嫁衣襯著肌膚如雪界阁。 梳的紋絲不亂的頭發(fā)上侯繁,一...
    開封第一講書人閱讀 51,573評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音泡躯,去河邊找鬼贮竟。 笑死,一個(gè)胖子當(dāng)著我的面吹牛较剃,可吹牛的內(nèi)容都是我干的咕别。 我是一名探鬼主播,決...
    沈念sama閱讀 40,314評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼写穴,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼惰拱!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起啊送,我...
    開封第一講書人閱讀 39,230評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤偿短,失蹤者是張志新(化名)和其女友劉穎欣孤,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昔逗,經(jīng)...
    沈念sama閱讀 45,680評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡降传,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了勾怒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片婆排。...
    茶點(diǎn)故事閱讀 39,991評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖笔链,靈堂內(nèi)的尸體忽然破棺而出段只,到底是詐尸還是另有隱情,我是刑警寧澤卡乾,帶...
    沈念sama閱讀 35,706評(píng)論 5 346
  • 正文 年R本政府宣布翼悴,位于F島的核電站,受9級(jí)特大地震影響幔妨,放射性物質(zhì)發(fā)生泄漏鹦赎。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評(píng)論 3 330
  • 文/蒙蒙 一误堡、第九天 我趴在偏房一處隱蔽的房頂上張望古话。 院中可真熱鬧,春花似錦锁施、人聲如沸陪踩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽肩狂。三九已至,卻和暖如春姥饰,著一層夾襖步出監(jiān)牢的瞬間傻谁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工列粪, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留审磁,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,158評(píng)論 3 370
  • 正文 我出身青樓岂座,卻偏偏與公主長(zhǎng)得像态蒂,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子费什,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評(píng)論 2 355

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

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