React-Native网络请求加载界面

React-Native网络请求加载界面

　　当一个界面在从网络获取数据时，由于网速因素，需要个等待界面，这时候我们必须展示个友好界面，就是加载界面。这个加载动画可以使用react-native-spinkit github地址：https://github.com/maxs15/react-native-spinkit

• 利用state来显示或隐藏界面
  　　state一般用来改变组件的状态，假设我现在界面叫MainPage，我现在要控制它的显示或隐藏，就通过state来改变，state是可以通过setState来改变一个组件的状态，props就不行。我们需要在组件的构造器中初始化state，定义一个boolean值hidden，控制其显示或隐藏，代码如下：

 constructor(props){        super(props)        this.state={           hidden : true,   //初始化设置为true，就是隐藏，              我们一进入界面，肯定是要先隐藏的        }    }

• 网络请求成功后改变状态

  //网络请求  ES7写法    async requestApplyData() {        try {            let response = await fetch(REQUEST_URL)            let json = await response.json()            console.log("response",json)            let dataList = json.result.map(                (info) => {                    //请求成功后将boolean值置为false，也就是显示界面                    {this.setState({hidden:false})}                    return {                    /../  这边是请求数据的处理                    }                }            )        } catch (error) {            alert(error)        }    }

• 显示界面的逻辑，通过判断state的这个boolean值

 showPage(){       //隐藏       if(this.state.hidden){           return  (<Loadding/>);          }       //显示           return (              <View>                 /../   这里就是MainPage的视图              </View>           )    }

• MainPage的组件视图

render(){        return(            <View style={styles.container}>                {this.showPage()}            </View>        )    };

代码还是很简单的，主要是state的使用，有点像标志位，通过判断这个标志位来改变组件的状态。初学RN不久，大家互相交流，理解有误处请指出，后续也会经常在这边做一些项目总结。