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不久，大家互相交流，理解有误处请指出，后续也会经常在这边做一些项目总结。