[React native] View

View

UI를 구축하기 위한 가장 기본적인 구성 요소로 중첩이 가능하고 일부 터치 핸들링 및 접근성 제어가 가능하다.

코드

<View style={지정하고싶은 스타일}></View>

예시

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


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  style1: {
    height: 50,
    width: 50,
    marginTop: 50,
    marginBottom: 50,
    marginLeft: 50,
    marginRight: 50,
    backgroundColor: '#e93e42',
  },
  style2: {
    flex: 1,
    backgroundColor: '#f5a942',
  },
});

export default class AppView extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.style1}></View>
        <View style={styles.style2}></View>
      </SafeAreaView>
    );
  }
}

style1

View의 크기를 height와 width로 지정하고 위, 아래, 왼쪽, 오른쪽을 marginTop, marginBottom, marginLeft, marginRight로 지정하였다.

style2

View의 크기를 flex로 남은 공간 전체를 차지하도록 설정하였다.

실행결과