【ReactNative】映画情報アプリを作ろう！/＃2APIを使って映画一覧画面を作ろう編

---

どうもロックシステムのコジです！
今回は前回の続きReactNativeを使って映画検索アプリを作っています。
1回目では環境構築をして、ReactNativeの復習をしながら画面の大枠を作成し、APIの登録をしました。
・1回目はこちら！

---

2回目の今回は前回登録したAPIを使って映画一覧画面を作っていきます。
動画を見ながら是非チャレンジしてみてください！ 今回はコードを書く量も多いので以下の完成コード等参考にしてくださいね。ご不明点等はYoutubeのコメントからお気軽にどうぞ！

---

参考リンク等はこちら

---

00：43　TMDBサイトURL
https://www.themoviedb.org/?language=ja

---

02：23　axiosインストールコマンド

npm install axios

---

07：45　スマホからアプリを見る方法

1.movieAppプロジェクトからShift + 右クリックでPowerShellを開く
2.expo startコマンドを打って開発用スマホからExpo Goアプリを開いてmovieAppを選択
3.スマホ側でアプリが出てこない場合はスマホとPCが同じネット環境に繋がっているか確認しよう
4.PowerShellで「d」を押してブラウザを開いて、左側にあるiPhoneをクリック

---

08：13　FlatList
08：25　Imageタグのsource

      <FlatList
        data={nowPlaying}
        keyExtractor={item => item.id}
        horizontal={true}
        flashScrollIndicators
        renderItem={({ item }) => (
        <View style={styles.movieContainer}>
          <Image style={styles.movieImage} source={{uri: `https://image.tmdb.org/t/p/w300${item.poster_path}`}}></Image>
          <Text numberOfLines={1} style={styles.movieTitle}>{item.title}</Text>
        </View>
        )}>
      </FlatList>

---

13：22　ランダムな映画の取得方法参考リンク
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random

2回目の完成コードはこちら！

ファイル名：App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView, FlatList, Image } from 'react-native';
import { requests } from './request';
import axios from 'axios';
import { useState, useEffect } from 'react';
​
export default function App() {
  const [nowPlaying, setNowPlaying] = useState({});
  const [commingSoon, setCommingSoon] = useState({});
  const [populars, setPopulars] = useState({});
  const [topRated, setTopRated] = useState({});
  const [picupMovies, setPicupMovies] = useState({});
​
  useEffect(() => {
    async function getMovies() {
      try {
        const nowPlayingMovies = await axios.get(requests.NOW_PLAYING);
        setNowPlaying(nowPlayingMovies.data.results);
​
        const commingSoonMovies = await axios.get(requests.COMMING_SOON);
        setCommingSoon(commingSoonMovies.data.results);
​
        const popularsMovies = await axios.get(requests.POPULARS);
        setPopulars(popularsMovies.data.results);
​
        const topRatedMovies = await axios.get(requests.TOP_RATED);
        setTopRated(topRatedMovies.data.results);
      } catch (error) {
        console.log(error);
      }
    }
    async function getPickUpMovie() {
      try {
        const result = await axios.get(requests.NOW_PLAYING);
        const number = Math.floor(Math.random() * (result.data.results.length - 1) + 1);
        setPicupMovies(result.data.results[number]);
      } catch (error) {
        console.log(error);
      }
    }
    getMovies();
    getPickUpMovie();
  }, []);
  return (
    <ScrollView style={styles.container}>
      <View style={styles.pickupContainer}>
        <Image style={styles.pickupImage} source={{uri: `https://image.tmdb.org/t/p/w780${picupMovies.poster_path}`}}></Image>
        <Text style={styles.pickupTitle}>{picupMovies.title}</Text>
      </View>
​
      <Text style={styles.listName}>公開中の映画</Text>
​
      <FlatList
        data={nowPlaying}
        keyExtractor={item => item.id}
        horizontal={true}
        flashScrollIndicators
        renderItem={({ item }) => (
        <View style={styles.movieContainer}>
          <Image style={styles.movieImage} source={{uri: `https://image.tmdb.org/t/p/w300${item.poster_path}`}}></Image>
          <Text numberOfLines={1} style={styles.movieTitle}>{item.title}</Text>
        </View>
        )}>
      </FlatList>
​
      <Text style={styles.listName}>公開予定の映画</Text>
​
      <FlatList
        data={commingSoon}
        keyExtractor={item => item.id}
        horizontal={true}
        flashScrollIndicators
        renderItem={({ item }) => (
        <View style={styles.movieContainer}>
          <Image style={styles.movieImage} source={{uri: `https://image.tmdb.org/t/p/w300${item.poster_path}`}}></Image>
          <Text numberOfLines={1} style={styles.movieTitle}>{item.title}</Text>
        </View>
        )}>
      </FlatList>
​
      <Text style={styles.listName}>人気の映画</Text>
​
      <FlatList
        data={populars}
        keyExtractor={item => item.id}
        horizontal={true}
        flashScrollIndicators
        renderItem={({ item }) => (
        <View style={styles.movieContainer}>
          <Image style={styles.movieImage} source={{uri: `https://image.tmdb.org/t/p/w300${item.poster_path}`}}></Image>
          <Text numberOfLines={1} style={styles.movieTitle}>{item.title}</Text>
        </View>
        )}>
      </FlatList>
​
      <Text style={styles.listName}>高評価の映画</Text>
​
      <FlatList
        data={topRated}
        keyExtractor={item => item.id}
        horizontal={true}
        flashScrollIndicators
        renderItem={({ item }) => (
        <View style={styles.movieContainer}>
          <Image style={styles.movieImage} source={{uri: `https://image.tmdb.org/t/p/w300${item.poster_path}`}}></Image>
          <Text numberOfLines={1} style={styles.movieTitle}>{item.title}</Text>
        </View>
        )}>
      </FlatList>
      <StatusBar style="auto" />
    </ScrollView>
  );
}
​
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#202328'
  },
  pickupContainer: {
    width: '100%', 
    flexDirection: 'row', 
    alignItems: 'center', 
    justifyContent: 'center'
  },
  pickupImage: {
    height: 350, 
    width: '45%',
    resizeMode: 'contain'
  },
  pickupTitle: {
    color: '#fff', 
    fontSize: 24, 
    fontWeight: 'bold', 
    width: '45%', 
    marginLeft: 5
  },
  listName: {
    color: '#fff', 
    fontSize: 18, 
    fontWeight: 'bold'
  },
  movieContainer: {
    width: 130,
    marginBottom:30
  },
  movieImage: {
    height: 200,
    marginRight: 10,
    resizeMode: 'contain'
  },
  movieTitle: {
    color: '#ccc', 
    fontSize: 14
  }
});

ファイル名：request,js

const BASE_URL = 'https://api.themoviedb.org/3';
const API_KEY = '6e044104eab08fa1afbc1bce908316a1';
​
export const requests = {
    NOW_PLAYING :`${BASE_URL}/movie/now_playing?api_key=${API_KEY}&language=ja&page=1`,
    COMMING_SOON:`${BASE_URL}/movie/upcoming?api_key=${API_KEY}&language=ja&page=1`,
    POPULARS:`${BASE_URL}/movie/popular?api_key=${API_KEY}&language=ja&page=1`,
    TOP_RATED:`${BASE_URL}/movie/top_rated?api_key=${API_KEY}&language=ja&page=1`
}