【動画】ReactNativeでスマホ向けニュースアプリをつくろう！APIを使ってニュース記事を表示しよう！

このブログはロックシステムのYoutubeチャンネル「ロックシステムアカデミーCH」の文字起こしや使用したコードの解説等をしています。
是非動画本編もご覧ください！
よろしければチャンネル登録も宜しくお願い致します！

---

【第1回】ReactNativeでスマホ向けニュースアプリをつくろう！環境設定編【第2回】ReactNativeでスマホ向けニュースアプリをつくろう！コードを書いてみよう！

---

■参考サイト
・NewsAPI

・Expo公式ドキュメント

・app.json を使用した構成

・Constants　インストール手順API

・Axios

・Flatlist(ReactNative公式)

---

【使用したコードはこちら】
■ファイル名：App.js

import React, { useState, useEffect } from "react";
import { StyleSheet, View, FlatList } from "react-native";
import NewsKizi from "./components/NewsKizi";
import Constants from "expo-constants";
import axios from "axios";

const URI = `https://newsapi.org/v2/top-headlines?country=jp&category=entertainment&apiKey=${Constants.manifest.extra.newsApiKey}`;

export default function App() {
  const [news, setNews] = useState([]);

  useEffect(() => {
    getNews();
  }, []);

  const getNews = async () => {
    const response = await axios.get(URI);
    setNews(response.data.articles);
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={news}
        renderItem={({ item }) => (
          <NewsKizi
            imageuri={item.urlToImage}
            title={item.title}
            subtext={item.publishedAt}
          />
        )}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});

■ファイル名：NewsKizi.js

import React from "react";
import { StyleSheet, Text, View, Image } from "react-native";

const NewsKizi = ({ imageuri, title, subtext }) => {
  return (
    <View style={styles.box}>
      <View style={styles.moziBox}>
        <Text style={styles.text}>{title}</Text>
        <Text style={styles.subText}>{subtext}</Text>
      </View>

      <View style={styles.gazoBox}>
        <Image style={{ width: 100, height: 100 }} source={{ url: imageuri }} />
      </View>
    </View>
  );
};

export default NewsKizi;

const styles = StyleSheet.create({
  box: {
    height: 100,
    width: "100%",
    borderColor: "lightblue",
    borderWidth: 1,
    flexDirection: "row",
  },

  moziBox: {
    flex: 1,
    backgroundColor: "steelblue",
    padding: 16,
    justifyContent: "space-between",
  },

  gazoBox: {
    width: 100,
    backgroundColor: "powderblue",
  },

  text: {
    fontSize: 16,
  },

  subText: {
    fontSize: 12,
    color: "red",
  },
});

チャンネル登録よろしくお願いします！