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

1.加載全部分類新聞

我們需要做的效果是打開 App ，首先只加載第一頁的數(shù)據(jù)，其他頁面在第一次顯示的時候加載數(shù)據(jù)。

我們需要一個狀態(tài)來標明是不是第一次顯示，給 state 加入 isFirstShow: true，我們在網(wǎng)絡請求里給他賦值為 false。

在做的過程中發(fā)現(xiàn)一個問題，我們需要取到它的 EndKey 來作為下次請求的 StartKey ，否則可能會請求失敗，給 state 加入 startKey: '' ，然后在請求到數(shù)據(jù)后賦值：

 _onRefresh(page) {
    this.setState({
        isFirstShow: false
    })

    if (this.props.dic) {

        this._begainRefresh()

        if (page == 1) {
            this.setState({
                page
            })
        } else  {
            page = this.state.page
        }

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

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

                this._endRefresh()

                res.json()
                    .then((json) => {

                        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)

                        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,
                            startKey: json.EndKey ? json.EndKey : this.state.startKey
                        })
                    })
                    .catch((e) => {
                        LOG('GET ERROR then =>', url, e)

                    })
            })
            .catch((error) => {
                this._endRefresh()
                LOG('GET ERROR=>', url, '==>', error)
            })
    }
}

然后返回我們的 Home.js ，在這里處理是否請求數(shù)據(jù)：

首先給 NewsList 加上 ref

lists.push(
    <NewsList
        ref={'NewsList' + index}
        key={index}
        style={{backgroundColor:'white', width: width, height: height - 64 - 49 - 30}}
        dic={dic}
        isRequest={index == 0}
        touchIn={(scrollEnabled) => {
            this.refs.ScrollView.setNativeProps({scrollEnabled: !scrollEnabled})
        }}
    />
)

然后在點擊 SegmentedView 和滑動 ScrollView 的時候來進行處理：

<SegmentedView
    ref="SegmentedView"
    list={this.state.list}
    style={{height: 30}}
    selectItem={(index) => {
        this.refs.ScrollView.scrollTo({x: width * index, y: 0, animated: true})
        this._scrollTo(index)
    }}
/>

<ScrollView
    removeClippedSubviews={Platform.OS === 'ios'}
    style={styles.view}
    ref="ScrollView"
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    pagingEnabled={true}
    onMomentumScrollEnd={(s) => {
        let index = s.nativeEvent.contentOffset.x / width
        this.refs.SegmentedView._moveTo(index)
        this._scrollTo(index)
    }}
>

如果是第一次顯示，那么請求數(shù)據(jù)：

_scrollTo(index) {
    let newsList = this.refs['NewsList' + index]
    newsList.state.isFirstShow && newsList._onRefresh()
}

2.詳情頁

詳情頁進去是一個網(wǎng)頁，我們直接寫死一個網(wǎng)頁。

創(chuàng)建 NewsDetail.js

import React from 'react'

import {
    View,
    Text,
    StyleSheet,
    WebView
} from 'react-native'

import NavigationBar from '../Custom/NavBarCommon'

export default class NewsDetail extends React.Component {
    render() {
        return (
            <View style={styles.view}>
                <NavigationBar
                    title="詳情頁"
                    navigator={this.props.navigator}
                />
                <WebView
                    style={{flex:1}}
                    source={{uri: 'http://zjzywap.eastday.com/m/170425001829725.html?fr=toutiao&qid=zjxw&apptypeid=ZJZYIOS1114283782&ime=6271F554-7B2F-45DE-887E-4A336F64DEE6'}}
                />

            </View>
        )
    }
}


const styles = StyleSheet.create({
    view: {
        flex:1,
        backgroundColor: 'white'
    }
})

然后我們?nèi)?NewsList.js 引入：

import NewsDetail from './NewsDetail'

然后我們需要進行 push :

_onPress() {
    this.props.navigator && this.props.navigator.push({
        component: NewsDetail,
        params: {
            navigator: this.props.navigator, //這個并不用傳入, 這里只是為了演示參數(shù)的傳入
        }
    })
}

我們 push 需要用到 navigator， 但是的 NewsList 我們并沒有給它傳入 navigator ，我們需要去 Home.js ：

<NewsList
    ref={'NewsList' + index}
    key={index}
    style={{backgroundColor:'white', width: width, height: height - 64 - 49 - 30}}
    dic={dic}
    isRequest={index == 0}
    touchIn={(scrollEnabled) => {
        this.refs.ScrollView.setNativeProps({scrollEnabled: !scrollEnabled})
    }}
    navigator={this.props.navigator}
/>

然后進行調(diào)用

在 renderRow 方法內(nèi)的 CarousePicture 以及下面的 2 個 TouchableOpacity 加入屬性 onPress={this._onPress}

例如這樣:

<CarousePicture
    index={5}
    ref="ScrollView"
    rowData={rowData}
    style={{width, height: 200}}
    touchIn={this.props.touchIn}
    onPress={this._onPress}
/>

最后我們需要進入 CarousePicture.js 內(nèi)的 TouchableWithoutFeedback 來調(diào)用回調(diào)函數(shù):

 <TouchableWithoutFeedback
    style={{flex:1,width, height:200, backgroundColor:'white'}}

    onPress={() => {
        this.props.onPress && this.props.onPress()
    }}
    onPressIn={() => {
        this.props.touchIn && this.props.touchIn(true)
    }}

    onPressOut={() => {
        this.props.touchIn && this.props.touchIn(false)
    }}
>

現(xiàn)在就可以 push 到詳情頁了

項目地址