在之前的章節(jié)，我們完成微信精選列表。在本章我們將一起完成詳情的界面，并且為列表增加下拉刷新，上拉加載等功能。

微信精選詳情

在編寫(xiě)詳情界面之前，我們需要給應(yīng)用增加一個(gè)導(dǎo)航控制器，就可以通過(guò)push的方式由列表跳轉(zhuǎn)到詳情。

class ReactNativeLearn extends Component {  
  render() {
    return (
      <NavigatorIOS
        style = {styles.container}
        initialRoute = {{
          component: NewsMain,
          title: '列表',
          barTintColor: '#28CD70',
          titleTextColor: '#4C4C4C'
        }}
      />
    );
  }
}

然后需要?jiǎng)?chuàng)建一個(gè)名為newsDetails的js文件，這就是詳情的組件。用戶點(diǎn)擊列表的單個(gè)cell，跳轉(zhuǎn)到詳情。詳情通過(guò)webview組件加載web界面。newsDetails代碼如下：

class NewsDetails extends Component {
  render() {
    return (
      <WebView
          style = {styles.container}
          source={{uri: this.props.newsData.url}}
      />
    )
  }
}

還需要為newsCell添加touch組件，使newsCell能夠接收用戶點(diǎn)擊。

<TouchableHighlight onPress={this.props.didCellSelected}></TouchableHighlight>

最后在newsMain的renderRow增加點(diǎn)擊newsCell的回調(diào)函數(shù)。

renderRow(rowData) {
  return (
    <NewsCell didCellSelected={() => {
      this.props.navigator.push({
        title: '詳情',
        component: NewsDetails,
        passProps: {newsData:rowData}
      });
    }} newsData={rowData}/>
  );
}

到此我們已經(jīng)完成微信精選應(yīng)用的開(kāi)發(fā)，最終實(shí)現(xiàn)的效果如圖：

列表.gif

細(xì)節(jié)處理

下面給微信精選列表增加下拉刷新和上拉加載的功能。

下拉刷新

給ListView的refreshControl屬性設(shè)置RefreshControl組件，即可實(shí)現(xiàn)下拉刷新。關(guān)于RefreshControl的詳細(xì)內(nèi)容看這里。

  onRefresh() {
    this.fetchNewsData();
  }
  
  render() {
    return (
      <View style={styles.container}>
        <ListView
         style = {styles.listContainer}
         dataSource = {this.state.dataSource}
         renderRow = {this.renderRow}
         renderSeparator = {this.renderSeparator}
         enableEmptySections={true}
         refreshControl = {
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this.onRefresh}
            tintColor="#ff0000"
            title="Loading..."
          />
        }
        />
      </View>
    );
  }

上拉加載

現(xiàn)在我們?cè)賮?lái)實(shí)現(xiàn)上拉加載更多的功能。上拉加載更多功能需要給ListView設(shè)置onEndReachedThreshold屬性和onEndReached回調(diào)函數(shù)。onEndReached當(dāng)ListView滑動(dòng)到距離底部不足某個(gè)像素值時(shí)被調(diào)用。onEndReachedThreshold接受Number類(lèi)型的值，表示調(diào)用onEndReached需要的距離底部的像素值。

  render() {
    return (
      <View style={styles.container}>
        <ListView
         style = {styles.listContainer}
         dataSource = {this.state.dataSource}
         renderRow = {this.renderRow}
         renderSeparator = {this.renderSeparator}
         enableEmptySections={true}
         refreshControl = {
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this.onRefresh}
            tintColor="#ff0000"
            title="Loading..."
          />
        }
        onEndReached = {this.onEndReached}
        onEndReachedThreshold = {20}
        />
      </View>
    );
  }

然后在onEndReached函數(shù)實(shí)現(xiàn)加載更多數(shù)據(jù)的網(wǎng)絡(luò)請(qǐng)求。

  onEndReached() {
    let pagenum = 20;
    page ++;
    let newsULR = 'http://apis.baidu.com/txapi/weixin/wxhot?num='+ pagenum +'&page='+ page;
    fetch(newsULR,{
        headers: {
            "apikey": "f589f2834aeab120eef2e750e4fb1dfb"
          }
        }).then((response) => response.json())
                .catch((error) => {
            console.error('error request!');
                })
                .then((responseData) => {
            newsDataList = newsDataList.concat(responseData.newslist);
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(newsDataList)
                    });
                })
                .done();
  }

最后我們給列表增加一個(gè)加載動(dòng)畫(huà)，用戶進(jìn)入應(yīng)用先展示加載動(dòng)畫(huà)，等列表數(shù)據(jù)請(qǐng)求完畢再展示列表數(shù)據(jù)。需要用到ActivityIndicatorIOS組件。

  render() {
    if (this.state.activityIndicator) {
      return (
        <View style={styles.container}>
          <ActivityIndicatorIOS
                    animating = {this.state.animating}
                    style = {styles.activityIndicator}
                    size = 'large'
                    color = 'rgb(230, 145, 0)'
          />
        </View>
      );
    }
    return (
      <View style={styles.container}>
        <ListView
           style = {styles.listContainer}
           dataSource = {this.state.dataSource}
           renderRow = {this.renderRow}
           renderSeparator = {this.renderSeparator}
           enableEmptySections={true}
           refreshControl = {
              <RefreshControl
                refreshing={this.state.isRefreshing}
                onRefresh={this.onRefresh}
                tintColor="#ff0000"
                title="Loading..."
              />
           }
           onEndReached = {this.onEndReached}
           onEndReachedThreshold = {20}
        />
      </View>
    );
  }

最終的效果：

微信精選.gif

到此，我們已經(jīng)完成微信精選列表的全部開(kāi)發(fā)工作。相信大家對(duì)React Native Apps的開(kāi)發(fā)已經(jīng)有一定的了解。

項(xiàng)目完整源碼

項(xiàng)目的完整源碼下載地址。

祝大家玩得愉快！