美文网首页
react-native button调用fetch获取数据 F

react-native button调用fetch获取数据 F

作者: 向前Hell | 来源:发表于2017-07-20 23:07 被阅读0次

    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

    相关文章

      网友评论

          本文标题:react-native button调用fetch获取数据 F

          本文链接:https://www.haomeiwen.com/subject/zuxskxtx.html