取得データの要求を使用してネイティブネットワークを反応させます

これは別のページで、あなたが他の場所からジャンプアップすることができます。

入力言語のキーワードは、githubのから関連データを取得します

インポートは、「反応」から、{コンポーネント}を反応させ; 
インポート{ 
  スタイルシート、
  ビュー、
  テキスト、
  ボタン、
  のTextInput、
}から「反応ネイティブ」。


エクスポートデフォルトクラスFetchDemoPageは、コンポーネント{延び
  コンストラクタ（小道具）{ 
    スーパー（小道具）。
    この .state = { 
      showText： '' 
    } 
  } 

  loaddataの（）{ 
    ましょうURL = `ます。https：// api.github.com/search/repositories?q = $ {this.searchKey}`; 
    フェッチ（URL）
          .then（レスポンス => response.text（）） 
          .then（responseText =>{
             この.setState（{ 
                showText：responseText 
            }）
          }）

  } 

  loadData2（）{ 
    ましょうURL = `ます。https：// api.github.com/search/repositories?q = $ {this.searchKey}`; 
    （URL）をフェッチ
          .then（応答 => {
             場合（response.ok）{
               リターンresponse.text（）; 
            } 
            スロー 新しいエラー（ 'ネットワークOKではない'を）; 
          }）
          .then（responseText => {
             この.setState（{
                showText：responseText 
            }）
          }） 
          。キャッチ（E => {
             この.setState（{ 
                showText：e.toString（）
            }）
          }）

  } 

  （レンダリング）{ 
    CONST {ナビゲーション} = これは.props。

    リターン（
       <ビュースタイル= {} styles.container> 
        <テキスト> 'FetchDemoPage' </テキスト> 

        <ビュースタイル= {} styles.input_container> 
          < TextInputの
            スタイル = {} styles.input 
            onChangeText= {テキスト=> {
               この .searchKey = テキスト。
            }}
             /> 
          < ボタン
            タイトル = '获取' 
            たonPress = {（）=> {
               この.loadData2（）。
            }}
           /> 
        </表示> 

        <テキスト> 
         { この.state.showText}
         </テキスト> 
      </表示>       ）。
  } 
} 
CONSTスタイル = StyleSheet.create（{ 
  コンテナ：{ 
    フレックス： 1 、
    のbackgroundColor：
 '＃1 F5FCFF' 、

  }、
  テキスト：{ 
    たfontSize： 20 、
    textAlign： '中央' 、
    マージン： 10 、
  }、
  入力：{ 
    高さ： 30 、
    フレックス： 1 、
    BORDERCOLOR： '黒' 、
    borderWidth： 1 、
    marginRight： 10 、
  }、
  input_container。 { 
    flexDirection： '行' 、
    justifyContent： '中央' 、
  } 
}）。

コードの表示