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

上一篇下一篇

猜你喜欢

热点阅读