React Native學習筆記之–ListView和RefreshControl實現下拉重新整理

今天利用React Native中的ListView來實現原生開發中的UITableView(Android中就叫ListView)的介面效果。
資料數利用Charles抓的網易的資料包，寫了一個簡單的佈局。

程式碼如下：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
    AlertIOS,
    RefreshControl,
} from 'react-native'
 
;

var screenWidth = require('Dimensions').get('window').width;

export default class HomeView extends Component {
    // 構造
      constructor(props) {
        super(props);
        // 初始狀態
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged:(r1, r2) =>
 
 r1 !== r2
            }),
            isRefreshing: false,
        };
      }

    render() {
        return(
            <View style={{flex: 1}}>
                <ListView
                    showsVerticalScrollIndicator={false}
                    dataSource={this.state.dataSource}
                    renderRow={this
 
.renderRow.bind(this)}
                    refreshControl={
                    <RefreshControl
                    refreshing={this.state.isRefreshing}
                    onRefresh={this.onRefresh.bind(this)}
                    tintColor="#ff0000"
                    title="Loading..."
                    ></RefreshControl>}
                ></ListView>
            </View>
        );
    }

    onRefresh() {
        console.log('請求資料');
        this.setState({
            isRefreshing: true,
        });
        // 利用延時方便看效果
        this.timer = setTimeout(
            () => { this.fetchDatafromServer()},
            1000
        );

    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }

    componentDidMount() {
        this.fetchDatafromServer();
    }

    // 從網路獲取資料
    fetchDatafromServer() {
        return(
            fetch('http://c.m.163.com/recommend/getSubDocPic?from=toutiao&prog=LMA1&open=&openpath=&fn=1&passport=wAMcoAHfw2005y4aLHWMhLX2WMCoMqapk08GhEzPqX4%3D&devId=RIg5lUJmHyLPluKfNcKleGPYZ1EEJFlOrDlXGiKBo2BTBAyUk9sl4mRNZz4CNQpS&offset=0&size=10&version=17.2&spever=false&net=wifi&lat=0ES%2BF1bCKnLwYbmg4LwdeQ%3D%3D&lon=c7vQ58a7T0ybMOvO6zvYHA%3D%3D&ts=1480662564&sign=SDOuZ7oiUktmWquT12nJdr44AKkjHYX8pHPDg07Fg7V48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore')
                .then((response) => response.json())
                .then((responseJson) => {
                    this.serializeData(responseJson);
                }).catch((error) => {
                alert('網路錯誤');
            })
        );
    }

    // 處理資料
    serializeData(responseJson) {
        var allData = responseJson.tid;
        var listDataSource = [];
        var advDataSource = [];
        for (var i = 0; i < allData.length; i ++) {
            if (allData[i].hasHead == 1) {
                advDataSource = allData[i].ads;
            } else {
                listDataSource.push(allData[i]);
            }
        }
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(listDataSource),
            isRefreshing: false,
        });
    }

    // 建立cell
    renderRow(rowData) {
        return(
            <TouchableOpacity
                activeOpacity={0.5}
                onPress={()=>{this.showNewsDetailView()}}
            >
                <View style={styles.newsRowStyle}>
                    <Image source={{uri: rowData.imgsrc}} style={styles.newsImageStyles}></Image>
                    <View style={styles.contentStyles}>
                        <Text style={styles.newsTitleStyles}>{rowData.title}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }

    showNewsDetailView() {
        AlertIOS.alert('點選cell');
    }
}

const styles = StyleSheet.create({
    newsRowStyle: {
        flexDirection: 'row',
        padding: 5
    },
    newsImageStyles: {
        width: 100,
        height: 80
    },
    contentStyles: {
        width: screenWidth - 110
    },
    newsTitleStyles: {
        paddingLeft: 8,
        fontSize: 18,
    },
    newsReplyCountStyles: {

    }
});

demo效果：