React Native (一)：基礎
React Native (二)：StatusBar 、 NavigationBar 與 TabBar
React Native (三)：自定義視圖
React Native (四)：加載新聞列表
React Native (五)：上下拉刷新加載
React Native (六)：加載所有分類與詳情頁

1.下拉刷新

下拉刷新我們使用 React Native 提供的組件 RefreshControl，去 NewsList.js 的 ListView 添加：

<ListView
    style={{flex:1, backgroundColor:'white'}}
    dataSource={this.state.dataSource} //設置數據源
    renderRow={this.renderRow} //設置cell
    removeClippedSubviews={false}
    refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={() => this._onRefresh(1)}
            tintColor="#999999"
            title="加載中..."
            titleColor="#999999"
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="#ffff00"
          />
    }
/>

ListView 新加了一個屬性 removeClippedSubviews。

原因

我們需要給 state 添加一個 key ： isRefreshing: false ，然后在網絡請求時對它進行處理，（我這里省略了一些代碼，要不然太長）

_begainRefresh() {
    this.setState({
        isRefreshing: true
    })
}
_endRefresh() {
    this.setState({
        isRefreshing: false
    })
}

_onRefresh(page) {
    if (this.props.dic) {
        this._begainRefresh()

        if (page == 1) {
            this.setState({
                page
            })
        }
        let url = ''

        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
            .then((res) => {

                this._endRefresh()

                res.json()
                    .then((json) => {
                    ..... 數據的處理
                    })
                    .catch((e) => {
                    })
            })
            .catch((error) => {
                this._endRefresh()
            })
    }
}

現在運行程序就可以盡情地下拉刷新了。

2.上拉加載

上拉加載我們利用 ListView 的 onEndReached 方法來進行加載新數據，使用 renderFooter 來進行顯示狀態。

這樣嚴格的來說并不算上拉加載，只是滑動到底部自動進行加載。

首先在 ListView 加入：

onEndReached={ this._toEnd }
onEndReachedThreshold={10}
renderFooter={ this._renderFooter }

記得進行綁定

this._toEnd = this._toEnd.bind(this)
this._renderFooter = this._renderFooter.bind(this)

實現

_toEnd() {
    if (this.state.isRefreshing) return  
    this._onRefresh()
}

_renderFooter() {
    return (
        <View style={{width, height: 40, backgroundColor: '#FFFFFF', alignItems:'center', justifyContent:'center'}}>
            <Text>正在加載更多...</Text>
        </View>
    )
}

現在我們需要對數據進行處理，保存請求到的數據，再下一頁數據請求到后加入數組，我們給 state 加入一個 data: []，然后對請求到的數據進行處理：

let list = json.NewsList

let swipers = []
let news = []

if (page == 1) {
    for (let index in list) {
        let dic = list[index]
        index < 4 ? swipers.push(dic) : news.push(dic)
    }
    news.splice(0, 0, swipers)
} else {
    news = list
}

let newData = this.state.data.concat(news)

this.setState({
    dataSource: this.state.dataSource.cloneWithRows(newData),
    data: newData,
    page: this.state.page + (list.length == maxCount ? 1 : 0)
})

這里的 maxCount 是為了方便管理的，定義為：

const maxCount = 20

請求的 url 改為 :

let url = 'http://api.iapple123.com/newspush/list/index.html?clientid=1114283782&v=1.1&type='
        + this.props.dic.NameEN
        + '&startkey=3001_9223370543834829200_537d522d125e32ae&newkey=&index='
        + page
        + '&size='
        + maxCount
        + '&ime=6271F554-7B2F-45DE-887E-4A336F64DEE6&apptypeid=ZJZYIOS1114283782'

現在可以運行看看效果了。

我們會發現一開始在加載第一頁數據的時候 Footer 也顯示了出來，我們需要控制它的顯示與隱藏，給 state 加入 showFooter: false ，在第一頁數據加載完成并且返回的數組元素個數等于 maxCount 則賦值為 true

this.setState({
    dataSource: this.state.dataSource.cloneWithRows(newData),
    data: newData,
    page: this.state.page + (list.length == maxCount ? 1 : 0),
    showFooter: this.state.showFooter ? true :  (list.length == maxCount ? true : false)
})

_renderFooter() {

    if (!this.state.showFooter) {
        return null
    }
    return (
        <View style={{width, height: 40, backgroundColor: '#FFFFFF', alignItems:'center', justifyContent:'center'}}>
            <Text>正在加載更多</Text>
        </View>
    )
}

現在 Footer 可以正確的顯示隱藏了，但是我們還需要狀態來改變 Footer 顯示的文字，如果還有更多數據，那我們看見 Footer 的時候它的狀態顯然是正在加載更多，如果沒有更多數據了，那我們就顯示 已加載全部 。

給 state 加入 hasMore: true ，我們先假設它還有更多

然后在請求到數據進行處理:

let hasMore = list.length == maxCount ? true : false

this.setState({
    dataSource: this.state.dataSource.cloneWithRows(newData),
    data: newData,
    page: this.state.page + (hasMore ? 1 : 0),
    showFooter: this.state.showFooter ? true :  (hasMore ? true : false),
    hasMore,
})

然后處理 renderFooter:

_renderFooter() {

    if (!this.state.showFooter) {
        return null
    }
    return (
        <View style={{width, height: 40, backgroundColor: '#FFFFFF', alignItems:'center', justifyContent:'center'}}>
            <Text>{this.state.hasMore ? '正在加載更多...' : '已加載全部'}</Text>
        </View>
    )
}

我們還需要再 toEnd 的判斷條件加入 hasMore 來避免顯示沒有更多數據的時候拉倒底部還會進行請求數據：

_toEnd() {
    if (this.state.isRefreshing || !this.state.hasMore) return
    this._onRefresh()
}

到現在上下拉刷新已經完成

這個上拉刷新比較簡陋，你也可以放 gif圖 或者使用 動畫 來讓界面變好看點。

項目地址