react-ネイティブAPIとの通信

卒業プロジェクトに残された良い内容.

この記事はreactとrest api通信に関する記事(https://react.vlpt.us/integrate-api/01-basic.html)(ありがとう)

What is Rest API ?

Representational State Transfer APIの略で、リソースの状態(情報)を名前で区切って交換するすべてのコンテンツを指す.
改めてまとめると、HTTP URIによりリソースが指定され、HTTPメソッド(POST、GET、PUT、DELETE)によりそのリソースに対してCRUD操作が適用されることを意味する.
Rest APIは、リソース、動作、および表現から構成される.

リソース:URI
リソースを区別するIDは、「/group/group id」などのHTTP URIである.
リソース名は、動詞ではなく名詞を使用します.

行為:HTTP方法
CRUDはGET、POST、PUT、DELETEにより実現される.
ex) GET/members/1

表記
クライアントがリソースステータス(情報)の操作を要求すると、サーバは対応する応答を送信します.
RESTでは、1つのリソースは、JSON、XML、TEXT、RSSなど、様々な形で表示することができる.

ありがとう🙏)
https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html
https://meetup.toast.com/posts/92

React-ネイティブを使用したデフォルトの画面構成の作成

figmaを使用して簡単にプロトタイプを作成し、主な機能を実現するための2つの画面を作成します.(ナビゲーションのみ)

準備完了のREST API

apiにaxiosというインストール名のライブラリが正式に呼び出されます.
(糸ではなくnpmでインストールされているので、プロジェクトファイルにインストールする必要があります)

$ npm install axios

インストールが完了したらapp.axiosをjsにインポートします.

import axios from 'axios';

次に、応答関数としてuseStateとuseEffectをインポートします.

import React, { useState, useEffect } from 'react';

分散サーバからのURI構造の表示

まず,サーバが提供するURIの構造を調べる.私が使っているURIは以下のような構造で構成されています.

{"data":[
	{
    "id":1,
    "title":"기사제목",
    "writer":"기자",
    "date":"작성일",
    "company":"언론사",
    "img":"기사사진",
    "article_origin":["기사원문"],
    "article_extractive":["추출요약"],
    "article_hashtag":"해시태그",
    "category":"카테고리"
    }, ...
]}

上記のuseStateを使用して、通信中に必要な変数を定義します.

const [news, setNews] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

ニュースuriにおけるニュースデータを持つ変数
load-通信Loading状態の変数
Error-ロード中にエラーが発生した場合、エラー内容を含む変数

uriからデータをロードし、news変数のコードに入れます。

const fetchNews = async () => {
  try {
    // 요청이 시작 할 때에는 error 와 users 를 초기화하고
    setError(null);
    setNews(null);
      
    // loading 상태를 true 로 바꿉니다.
    setLoading(true);
      
    const response = await axios.get(
      'http://uri_주소'
    );
      
    // 데이터는 response.data.data 안에 들어있다.
    setNews(response.data.data);
  } catch (e) {
    setError(e);
  }
  // loading 끄기
  setLoading(false);
};

// 첫 렌더링 때 fetchNews() 한 번 실행
useEffect(() => {
	fetchNews();
}, []);

注意

エラー:私が参照した例のUri内部構造は、私が使用しているuri内部構造とは異なるため、news変数にデータ内容を保存する場合.もう一度データを追加しました.(参考例ではresponse.dataで記述)uri構造をよくチェックしてからロードすることが望ましい.

if (loading) return <View style={{margin: 50, width: 300, height: 200}}><Text>로딩 중..</Text></View>;
if (error) return <View style={{margin: 50, width: 300, height: 200}}><Text>에러가 발생했습니다.</Text></View>;
if (!news) return null;

ロード時、エラーが発生した場合、ニュースデータがない場合、またはロードが正しくない場合に発生する文.

<ScrollView style={styles.scrollContainer} horizontal={true} showsHorizontalScrollIndicator={false} >
  {news.filter(user => user.category == 'politic').map(user => (
    <View style={styles.newsContainer}>
      <View style={styles.companyHeader}><Text key={user.id} style={styles.companyText}>{user.company}</Text></View>
      <TouchableOpacity activeOpacity='1' onLongPress={function () {navigation.push('Detail', {id: user.id})}} style={styles.article}>
        <View><Text key={user.id} style={styles.artTitle}>{user.title}</Text></View>
        <View><Image key={user.id} style={styles.artImage} source={{uri: user.img }}/></View>
        <View style={styles.artContentContainer}>
          <View><Text key={user.id} style={styles.artContent}>{user.article_extractive}</Text></View>
          <View><Text key={user.id} style={styles.artInfo}>{user.writer}</Text></View>
        </View>
      </TouchableOpacity>
    </View>
  ))}
</ScrollView>

newsに格納されているデータではcategoryは政治データ(.filter)のみをフィルタリングし、対応するニュースをscrollviewにリストしたコードにします.map関数を使用して、各ニュースデータを<ビュー>のコードリストに変換します.

コードを完了して実行すると、上記の接続の良い画面が完了します.