2023.09.01
BLOG
【動画】ReactNativeでスマホ向けニュースアプリをつくろう!コードを書いてみよう!
2021-12-29
このブログはロックシステムのYoutubeチャンネル「ロックシステムアカデミーCH」の文字起こしや使用したコードの解説等をしています。
是非動画本編もご覧ください!
よろしければチャンネル登録も宜しくお願い致します!
みなさんこんにちわ!ロックシステムアカデミーのろっくんです!
今回の動画シリーズはReactNativeを使用してスマホ向けニュースアプリを作っているよ。
前回は環境構築をしたから第2回目はいよいよコードを触りながら画像や文字を配置して画面を作っていくよ!
いよいよコードを書いていくんだね!
前回の動画を一度見ておさらいしたほうがよさそうだ!
■前回の動画はこちら
みなさんも動画を見ながらチャレンジしてみてね!
■今回使用したコードはこちら!
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',
},
});
株式会社ロックシステム
「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。