1.还是网络问题，在网络出现问题或者无法加载数据的时候，一般我们会展示空白页，在空白页中提示 无数据 之类的提示，比较好的还会使用 指示器 的方式告诉用户网络出现问题等等。

这边我们做以下处理，当无数据时，我们就先初始化基础界面，然后展示 提示页面，等到有数据时，再重新渲染数据。

步骤一：首先设置 无数据 页面

GDNoDataView.js

/** * 无数据情况 提示页 */import React, { Component } from 'react';import {    StyleSheet,    Text,    View,} from 'react-native';export default class GDNoDataView extends Component {    render() {        return (            
                 	
      
       无数据
                  
             );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent:'center',        alignItems:'center',    },    textStyle: {    	fontSize: 21,    	color: 'gray',    }});

 

步骤二：接着，没有数据的时候我们进行一些处理就可以了

GDHalfHourHot.js 调用

/** * 近半小时热门 */import React, { Component } from 'react';import {    StyleSheet,    Text,    View,    TouchableOpacity,    Image,    ListView,    Dimensions,    DeviceEventEmitter,} from 'react-native';// 获取屏幕宽高const {width, height} = Dimensions.get('window');// 引入自定义导航栏组件import CommunalNavBar from '../main/GDCommunalNavBar';// 引入 cellimport CommunalHotCell from '../main/GDCommunalHotCell';// 引入 空白页组件import NoDataView from '../main/GDNoDataView';export default class GDHalfHourHot extends Component {    // 构造    constructor(props) {        super(props);        // 初始状态        this.state = {            dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}), // 数据源 优化            loaded: false, // 用于判断是否显示空白页        };        // 绑定        this.fetchData = this.fetchData.bind(this);    }    // 网络请求    fetchData() {        // 测试没用数据的情况        setTimeout(() => {            fetch('http://guangdiu.com/api/gethots.php')  // 请求地址            .then((response) => response.json())  // 定义名称 将数据转为json格式            .then((responseData) => { // 处理数据                // 修改dataSource的值                this.setState({                    dataSource: this.state.dataSource.cloneWithRows(responseData.data),                    loaded:true,                });            })            .done(); // 结束        },3000)    }    // 跳回首页    popToHome() {        this.props.navigator.pop();    }    // 返回中间按钮    renderTitleItem() {        return(            
     
      近半小时热门
             );    }    // 返回右边按钮    renderRightItem() {        return(            
     
       {this.popToHome()}}            >                
      
       关闭
                  
             );    }    // 判断显示列表 还是 显示空白页    renderListView() {        if(this.state.loaded === false) {            // 显示空白页            return(                
                 );        }else{            return(                
                 );        }    }    // 返回 listView 头部    renderHeader() {        return(            
                     
      
       根据每条折扣的点击进行统计,每5分钟更新一次
                  
             );    }    // 返回每一行cell的样式    renderRow(rowData) {        // 使用cell组件        return(            
             );    }    componentWillMount() {        // 向GDMain.js 发送通知 隐藏tabBar        DeviceEventEmitter.emit('isHiddenTabBar', true);    }    componentWillUnmount() {        // 向GDMain.js 发送通知 显示tabBar        DeviceEventEmitter.emit('isHiddenTabBar', false);    }    // 生命周期 组件渲染完成 已经出现在dom文档里    componentDidMount() {        // 请求数据        this.fetchData();    }    render() {        return (            
     
                      {/* 导航栏样式 */}                
      
        this.renderTitleItem()}                    rightItem = {() => this.renderRightItem()}                />                {/* 根据网络状态决定是否渲染 listView */}                {this.renderListView()}            
      
             );    }}const styles = StyleSheet.create({    container: {        flex:1,        alignItems: 'center',    },    navbarTitleItemStyle: {        fontSize:17,        color:'black',        marginLeft:50    },    navbarRightItemStyle: {        fontSize:17,        color:'rgba(123,178,114,1.0)',        marginRight:15    },    headerPromptStyle: {        height:44,        width:width,        backgroundColor:'rgba(239,239,239,0.5)',        justifyContent:'center',        alignItems:'center'    },    listViewStyle: {        width:width,    }});

效果图: