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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 不知不觉2017年的余额已经所剩无几了 下面是我这一年来收藏的关于IOS开发的一些知识点 . iOS功能 iOS ...
    临渊还在阅读 696评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,019评论 25 708
  • iOS功能 iOS 如何跳转到系统设置里的指定子功能界面 http://blog.csdn.net/jingfa1...
    EmmaLyx阅读 692评论 0 4
  • 我平时甚少看韩剧,近几年口碑较好的韩剧我就只看了《继承者们》。前段时间,看到很多关于《请回答1988》的介绍,惊觉...
    花开candy阅读 5,239评论 29 58
  • 今天可就更忙了,连送孩子上学都没时间,厂里按装设备师傅们和孩子上学是同一时间段。只好让别人帮我去送孩子上学了,谢谢...
    二年级五班崔世昊阅读 207评论 0 0