- Viewコンポーネントって何？
- どんな時に使うの？
とViewコンポーネントについて疑問がある方向けの記事となっています。
1. 概要
Viewを使うことでレイアウトを整えることができますが、Viewの書き方が原因でレイアウトが崩れてしまうことがあります。
Viewコンポーネントは必ず使うコンポーネントですので、Viewコンポーネントの基本的なことについて、例を用いながら解説していきたいと思います。
2. Viewコンポーネント
2.1 Viewコンポーネントとは？
下記の公式ドキュメントには、次のように書かれています。
公式ドキュメント
「UIを構築するための最も基本的なコンポーネントであるViewは、flexbox,スタイル,一部のタッチ処理,およびアクセシビリティコントロールを使用したレイアウトをサポートするコンテナーです。」と書かれています。
つまり、Viewコンポーネントとは、レイアウトを整えたりやデザイン、タッチ処理の設定をすることができるコンポーネントであるということです。
2.2 レイアウトについて
Viewを扱う際にとって、レイアウト設定が大切となってきます。flexを使うことで、レイアウトを均等配置にすることができるますので、いくつか例を上げていきます。
例1： 縦型に均等配置
＜View＞にそれぞれflex:1を設定することで、1:1:1の均等配置にすることができます。
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <View style={{backgroundColor: "red", flex: 1}}></View> <View style={{backgroundColor: "blue", flex: 1}}></View> <View style={{backgroundColor: "green", flex: 1}}></View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); |
ここで重要なのは、View３つを囲む大枠のViewです。この大枠のViewでも、flexを宣言する必要があります。この大枠のViewのflex:1は、画面全体を指していると考えてもらえればOKです。
例2： 横型に均等配置
View3つを囲む大枠のView内でflexDirection: “row”と宣言すると横型になります。
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <View style={{backgroundColor: "red", flex: 1}}></View> <View style={{backgroundColor: "blue", flex: 1}}></View> <View style={{backgroundColor: "green", flex: 1}}></View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: "row", }, }); |
例3： 「1:2:5」の横型配置
flexを使うことで、指定した割合のレイアウトで表示することができます。
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <View style={{backgroundColor: "red", flex: 1}}></View> <View style={{backgroundColor: "blue", flex: 2}}></View> <View style={{backgroundColor: "green", flex: 5}}></View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); |
例4： 横と縦の均等配置
下記のように表示させることもできます。
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <View style={{backgroundColor: "red", flex: 1}}></View> <View style={{flex: 1, flexDirection: "row"}}> <View style={{backgroundColor: "blue", flex: 1}}></View> <View style={{backgroundColor: "green", flex: 1}}></View> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); |
例5： 電卓配置
電卓アプリのレイアウトもViewとflexを理解していれば、作ることが可能です。
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <View style={{flex: 1}}> <View style={styles.calculation}></View> </View> <View style={{flex: 3}}> <View style={styles.calculation}></View> </View> <View style={{flex: 6}}> <View style={{flex: 1, flexDirection: "row"}}> <View style={styles.calculation}></View> <View style={styles.calculation}></View> <View style={styles.calculation}></View> </View> <View style={{flex: 1, flexDirection: "row"}}> <View style={styles.calculation}></View> <View style={styles.calculation}></View> <View style={styles.calculation}></View> </View> <View style={{flex: 1, flexDirection: "row"}}> <View style={styles.calculation}></View> <View style={styles.calculation}></View> <View style={styles.calculation}></View> </View> <View style={{flex: 1, flexDirection: "row"}}> <View style={styles.calculation}></View> <View style={styles.calculation}></View> <View style={styles.calculation}></View> </View> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, calculation: { backgroundColor: "gray", flex: 1, borderWidth: 1, borderColor: "white", } }); |
3. まとめ
Viewコンポーネントは、アプリ開発で大事なコンポーネントです。本記事を読んでもらったことで、少しでもViewについて理解して頂けたら嬉しいです。
“Viewコンポーネントについて解説【ReactNative】” への6件のフィードバック