react-native network api

Posted on

  1. 声明变量

    1
    2
    3
    4
    5
    6
    constructor(props) {
      super(props);
      this.state = {
        jobs: null,
      };
    }

  2. fetch方法 获取接口数据 给变量赋值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    fetchData(){
        fetch(REQUEST_URL, {
        //
          method: 'GET'
        }).then((response) => response.json()) .then((responseData) => {
          alert(responseData.recruit_infos)
          this.setState({          
            jobs: responseData.recruit_infos,
          });
        }).catch((error) => {
          callback(error);         
        });
     }

  3. 调用这个方法 

1
2
3
componentDidMount(){         
   this.fetchData();
}

  1. 渲染页面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    render(){                    
        if (!this.state.jobs) {    
          return this.renderLoadingView();
        }
        return this.renderJobs();  
      }
      
      renderLoadingView(){         
        return (
          <View style={styles.container}>
            <Text>
              正在加载职位数据......
            </Text>
          </View>
        );
      }

      renderJobs() {
        return this.state.jobs.map((job,i) => {
          return (
            <View style={styles.container} key={i}>   //一定要有key 不然会警告
              <View style={styles.rightContainer}>
                <Text style={styles.title}>{job.job_post}</Text>
              </View>
            </View>
          );
        });
      }