【ReactNative】映画情報アプリを作ろう！/＃1環境設定と画面を作ろう編

---

どうもロックシステムのコジです！
今回の作って学ぶYoutubeシリーズのテーマは「ReactNative」映画情報アプリを作っていきます！

---

第一回の動画では以下の３つの流れを一緒にやっていきましょう。
①.環境設定
②.React Nativeの基礎を復習しながら一画面を変更してみよう
③.今回使用するAPIの登録
※今回のReactNativeの開発では前回のニュースアプリの開発でも使用した環境をそのまま使用します。
環境設定がまだの方は先にこちらの動画を見て環境設定を済ませておいてください！
【動画】ReactNativeでスマホ向けニュースアプリをつくろう！環境設定編

---

是非動画を見ながらアプリ開発にチャレンジしてみてください！

今回使用したコード、コマンドはこちら！

01：26～　バージョンを確認するコマンド

node -v
→ Node.jsを確認するコマンド

npm -v 
→ npmを確認するコマンド

 expo --version
→ Expoを確認するコマンド

02：26～　Expoバージョンを合わせるコマンド

npm install -g expo-cli@5.5.1

02：54～　movieAppプロジェクト作成コマンド

expo init movieApp

05：12～　コピーするcss.js

pickupContainer: {
    backgroundColor: 'red',
    width: '100%', 
    },
    pickupImage: {
    backgroundColor: 'gray',
    height: 350, 
    width: '45%'
    },
    pickupTitle: {
    color: '#fff', 
    fontSize: 24, 
    fontWeight: 'bold', 
    width: '45%', 
    marginLeft: 5
    },
    listName: {
    color: '#fff', 
    fontSize: 18, 
    fontWeight: 'bold',
    marginBottom: 5
    },
    movieImage: {
    backgroundColor: 'yellow',
    width: 130,
    height: 200,
    marginRight: 10,
    },
    movieTitle: {
    color: '#ccc', 
    fontSize: 14
}

第一回の最終コード

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
​
export default function App() {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.pickupContainer}>
        <View style={styles.pickupImage}></View>
        <Text style={styles.pickupTitle}>映画のタイトル</Text>
      </View>
​
      <Text style={styles.listName}>公開中の映画</Text>
​
      <View style={{backgroundColor: 'blue', width: '100%', flexDirection: 'row'}}>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
      </View>
​
      <Text style={styles.listName}>公開予定の映画</Text>
​
      <View style={{backgroundColor: 'blue', width: '100%', flexDirection: 'row'}}>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
      </View>
​
      <Text style={styles.listName}>人気の映画</Text>
​
      <View style={{backgroundColor: 'blue', width: '100%', flexDirection: 'row'}}>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
      </View>
​
      <Text style={styles.listName}>高評価の映画</Text>
​
      <View style={{backgroundColor: 'blue', width: '100%', flexDirection: 'row'}}>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
        <View>
          <View style={styles.movieImage}></View>
          <Text style={styles.movieTitle}>映画のタイトル</Text>
        </View>
      </View>
      <StatusBar style="auto" />
    </ScrollView>
  );
}
​
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#202328'
  },
  pickupContainer: {
    backgroundColor: 'red',
    width: '100%', 
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  pickupImage: {
    backgroundColor: 'gray',
    height: 350, 
    width: '45%'
  },
  pickupTitle: {
    color: '#fff', 
    fontSize: 24, 
    fontWeight: 'bold', 
    width: '45%', 
    marginLeft: 5
  },
  listName: {
    color: '#fff', 
    fontSize: 18, 
    fontWeight: 'bold',
    marginBottom: 5
  },
  movieImage: {
    backgroundColor: 'yellow',
    width: 130,
    height: 200,
    marginRight: 10,
  },
  movieTitle: {
    color: '#ccc', 
    fontSize: 14
  }
});