【動画】ReactNativeでスマホ向けニュースアプリをつくろう！コードを書いてみよう！

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

---

---

---

■前回の動画はこちら

---

---

■今回使用したコードはこちら！

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Image,} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>

      <View style={styles.box}>
        <View style={styles.moziBox}>
          <Text style={styles.text}>これは可愛い犬の画像です。猫を2匹飼っていますが犬も飼いたいです。</Text>
          <Text style={styles.subText}>テム</Text>
        </View>

        <View style={styles.gazoBox}>
          <Image style={{width: 100,height: 100}} source={{url: 'https://picsum.photos/id/237/200/300'}}/>
        </View>
      </View>

      <View style={styles.box}>
        <View style={styles.moziBox}>
          <Text style={styles.text}>ニュース記事がここに入ります。アプリを作るのは楽しいです。</Text>
          <Text style={styles.subText}>テム</Text>
        </View>

        <View style={styles.gazoBox}>
          <Image style={{width: 100,height: 100}} source={{url: 'https://picsum.photos/id/25/150/300'}}/>
        </View>
      </View>

      <View style={styles.box}>
        <View style={styles.moziBox}>
          <Text style={styles.text}>ROCKSYSTEMACADEMYは大阪にある実務を経験できるプログラミングスクールです</Text>
          <Text style={styles.subText}>テム</Text>
        </View>

        <View style={styles.gazoBox}>
          <Image style={{width: 100,height: 100}} source={{url: 'https://picsum.photos/id/27/100/100'}}/>
        </View>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  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',
  },
});