React Nativeでflex boxを利用して簡単なレイアウトを作成する

React Native画面作成

ViewタグはHTMLでいうところのdivタグのようなもの
CSSを勉強しないといい感じのレイアウトは作れない。

import React from 'react';
import { StyleSheet, Text, View,Image } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.itemContainer}>
        <View style={styles.leftContainer}>
        <Image source={{uri: 'https://picsum.photos/id/20/200/200'}}
       style={{width: 100, height: 100}} />
        </View>
        <View style={styles.rightContainer}>
          <Text numberOfLines={3} style={styles.text}>
            ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
            ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
            ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
          </Text>
          <Text style={styles.subText}>てすとてすとてすと</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemContainer: {
    height: 100,
    width: '100%',
    borderColor: "gray",
    borderWidth: 1,
    flexDirection: "row"
    },
    leftContainer: {
      width: 100,
    },
    rightContainer: {
      flex: 1,
      flexDirection: 'column',
      padding: 10,
      justifyContent: "space-between"
    },
    text:{
      fontSize: 16
    },
    subText:{
       fontSize: 12,
       color: "gray"
    }
});

作成した画面イメージ

f:id:PX-WING:20200614014508p:plain

flex-boxを使ってみある

flexDirectionは縦並び(column)、または横並び(row)を定義する
alignItemsはflexDirectionの垂直方向に、どのように寄せるか定義する

align-items: center; /* アイテムを中央付近にまとめる */ 
align-items: start; /* アイテムを先頭にまとめる */ 
align-items: end; /* アイテムを末尾にまとめる */ 
align-items: flex-start; /* フレックスアイテムを先頭にまとめる */ 
align-items: flex-end; /* フレックスアイテムを末尾にまとめる */

justifyContentはflexDirectionは同じ軸に対して、どのようによせるか定義する

/* 均等配置 */
justify-content: space-between; /* 各アイテムを均等に配置し
                                   最初のアイテムは先頭に寄せ、
                                   最後のアイテムは末尾に寄せる */
justify-content: space-around;  /* 各アイテムを均等に配置し
                                   各アイテムの両側に半分の大きさの
                                   間隔を置く */
justify-content: space-evenly;  /* 各アイテムを均等に配置し
                                   各アイテムの周りに同じ大きさの間隔を置く */
justify-content: stretch;       /* 各アイテムを均等に配置し
                                   サイズが 'auto' であるアイテムは、
                                   コンテナーに合わせて引き伸ばす */

サンプルソール

import React from 'react';
import { StyleSheet, SafeAreaView, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "space-around"
  },
  box: {
    width: 100,
    height: 100
  }
});

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={[styles.box, {backgroundColor: "red"}]} />
      <View style={[styles.box, {backgroundColor: "blue"}]} />
      <View style={[styles.box, {backgroundColor: "gray"}]} />
    </SafeAreaView>
  );
}