React Native做一个新闻Demo

学习了不少的控件，来尝试使用这些控件做一个新闻app的Demo，主框架还是使用之前学导航的时候搭建的那个，banner使用的也是之前学习scroll时候做的那个，这里主要看一下新闻列表和详情页，我使用的接口是抓的网页新闻的，这里先看一下列表页

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

//导入json数据
var localData = require('../LocalData.json');


var ScrollImage = require('./DCScrollView');

var DCNewsDetail = require('./DCNewsDetail');

var Home = React.createClass({

    getDefaultProps(){
        return {
            url_api: "http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html",
            key_word: "T1348647853363",
        }
    },

    //初始化方法
    getInitialState(){
        return{
            //listView头部的数据源
            headerDataArray: [],

            //cell的数据源
            dataSource: new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 != r2
            })
        }
    },

    render() {
        return (
            
        );
    },

    //单独的一个cell
    renderRow(rowData){
        return(
            {this.pushToNewsDetail(rowData)}}>
                
                    {/*左边*/}
                    
                    {/*右边*/}
                    
                        {rowData.title}
                        {rowData.digest}
                        {rowData.replyCount}跟帖
                    
                
            
        )
    },

    //跳转详情页
    pushToNewsDetail(rowData){
        this.props.navigator.push({
            component: DCNewsDetail,
            title: rowData.title,
            passProps: {rowData}
        })
    },

    //头部
    renderHeader(){
        //判断
        if (this.state.headerDataArray.length == 0) return;
        return(
            
        );
    },

    // 请求网络数据
    componentDidMount(){
        this.loadDataFromNet();
    },

    loadDataFromNet(){
        fetch(this.props.url_api)
            .then((response)=>response.json()) //转换成json
            .then((responseData)=>{
                //拿到所有数据
                var jsonData = responseData[this.props.key_word];
                // //定义临时变量
                // var headerArr = [], listDataArr = [];
                // //遍历拿到json数据
                // for (var i = 0; i < jsonData.length; i++){
                //     //取出单独的对象
                //     var data = jsonData[i];
                //
                //     //判断
                //     if (data.hasAD == 1){ //取出广告数据
                //         headerArr = data.ads;
                //     }else { //剩余的行数据
                //         listDataArr.push(data);
                //     }
                // }
                //
                // //更新状态机
                // this.setState({
                //     //listView头部的数据源
                //     headerDataArray: headerArr,
                //     //cell的数据源
                //     dataSource: this.state.dataSource.cloneWithRows(listDataArr)
                // });

                this.dealWithData(jsonData);
            })
            .catch((error)=>{  //捕获异常,比如网络不好的时候
                if (error){
                    // debugger;
                    // 特殊处理
                    //拿到所有数据
                    var jsonData = localData[this.props.key_word];
                    this.dealWithData(jsonData);
                }
            })
    },

    //处理网络数据
    dealWithData(jsonData){
        //定义临时变量
        var headerArr = [], listDataArr = [];
        //遍历拿到json数据
        for (var i = 0; i < jsonData.length; i++){
            //取出单独的对象
            var data = jsonData[i];

            //判断
            if (data.hasAD == 1){ //取出广告数据
                headerArr = data.ads;
            }else { //剩余的行数据
                listDataArr.push(data);
            }
        }

        //更新状态机
        this.setState({
            //listView头部的数据源
            headerDataArray: headerArr,
            //cell的数据源
            dataSource: this.state.dataSource.cloneWithRows(listDataArr)
        });
    }
})

const styles = StyleSheet.create({
    cellViewStyle:{
        //确定主轴方向
        flexDirection: 'row',
        //设置侧轴的对齐方式
        // alignItems: 'center',
        padding:10,
        //设置下边框
        borderBottomColor: '#e8e8e8',
        borderBottomWidth: 0.5,

    },
    rightViewStyle: {
        width:200,
        marginLeft: 8
    },
    imageStyle:{
        width:90,
        height:90,
    },

    titleStyle:{
        fontSize: 16,
        marginBottom: 5
    },

    subTitleStyle:{
        color:'gray',
    },

    flowTitleStyle:{
        //绝对定位
        position: 'absolute',
        right: 5,
        bottom: 0,

        //边框
        borderWidth:0.5,
        borderColor: 'gray',
        borderRadius: 5,
        padding:3,

        color: 'red',
    }
});

//输出类
module.exports = Home;

再看一下详情页面，其实很简单，就是个web页面，主要是解析了一下数据用webView加载，做了一下图片的样式

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    WebView
} from 'react-native';

var DCNewsDetail = React.createClass({
    getDefaultProps(){
      return{
         
      }  
    },

    getInitialState(){
      return{
          // 具体的数据
          detailData: ''
      }
    },
    
    render() {
        return (
            
        );
    },

    componentDidMount(){
       // 请求的路径
       var url_api = 'http://c.3g.163.com/nc/article/' + this.props.rowData.docid + '/full.html';
       // console.log(url_api);

      // 发送请求
       fetch(url_api)
           .then((response) => response.json())
           .then((responseData)=>{
               // 处理拿到的数据
               var allData = responseData[this.props.rowData.docid];

               console.log(allData);

               // 拿到body
               var bodyHtml = allData['body'];

               // 拿到图片数据
               if(allData['img'].length > 0){
                   // 遍历
                   for(var i=0; i';
                       // 替换body中的图像占位符
                       bodyHtml = bodyHtml.replace(img['ref'], imgHtml);
                   }
               }

               // 更新状态机
               this.setState({
                   detailData:bodyHtml
               });

           })
           .catch((error) => {
               alert('请求数据失败');
           })


    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

// 输出类
module.exports = DCNewsDetail;

这个Demo没怎么适配，比较丑，不截图了，可以运行一下看看，最后把之前学习过程中的所有代码都上传到了开源中国上，地址为 https://git.oschina.net/zcb1603999/LearningRN，可以看一看，后面有时间再做个商城的案例~