前言

通過前面的一系列聯(lián)系現(xiàn)在頁(yè)面布局技巧已經(jīng)掌握,頁(yè)面跳轉(zhuǎn)已經(jīng)搞定,頁(yè)面之間的參數(shù)傳遞也已經(jīng)搞定,我們的代碼也進(jìn)行了分層組織,但我們的應(yīng)用到現(xiàn)在為止都是死的.如何讓應(yīng)用活起來(lái)讀取遠(yuǎn)程數(shù)據(jù)呢.此篇我們便是用fetch來(lái)拉去遠(yuǎn)程數(shù)據(jù)
　　當(dāng)然如果你想了解更多方式和內(nèi)容歡迎閱讀官方文檔

開始

fetch可以接受兩個(gè)參數(shù),fetch(string,object),第一個(gè)參數(shù)是請(qǐng)求的遠(yuǎn)程地址;第二個(gè)參數(shù)是一個(gè)可選對(duì)象可以設(shè)定header,method,body等

現(xiàn)在在我們的代碼中添加如下代碼

_onRegister(){    
   fetch('http://192.168.191.1:8080/home/register', {
      //請(qǐng)求類型 
      method: 'POST',      
      //請(qǐng)求header
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      // 發(fā)送請(qǐng)求參數(shù)
      body: JSON.stringify({
        name: 'tom'        
      })
    }).then((response) => response.json())
      .then((jsonData) => {
        // 回寫數(shù)據(jù)
        this.setState({
          text : jsonData.text
        });
      })
      .catch((error) => {
         this.setState({
          text : '獲取服務(wù)器數(shù)據(jù)錯(cuò)誤'
        });
      });
}

放置一個(gè)區(qū)域來(lái)顯示數(shù)據(jù)文本并且在注冊(cè)按鈕上添加一個(gè)點(diǎn)擊事件,這樣點(diǎn)擊的時(shí)候就可以看到數(shù)據(jù)變化了

<Text style={styles.welcome}>
  {this.state.text}
</Text>  

<TouchableHighlight
    style={styles.th}
    underlayColor="rgb(210, 230, 255)"
    onPress={this._onRegister.bind(this)}>
    <Text>注冊(cè)</Text>               
</TouchableHighlight>