리액트 네이티브] 13. Dimensions

안드로이드와 다르게 리액트는 뷰에 마진을 줘도 위 아래 마진이 생길 뿐, 양 옆 마진이 생기지 않는다 ^-ㅠ

 

컴포넌트 호출하는 파일과 루트 앱 파일

- ../src/App.js

import React from "react";
import { StatusBar } from "react-native";
import styled, { ThemeProvider } from "styled-components/native";
import { theme } from "./theme"
import Input from "./component/Input";

const Container = styled.SafeAreaView`
    flex: 1;
    background-color: ${({ theme }) => theme.background };
    align-items: center;
    justify-content: flex-start;
`;

const Title = styled.Text`
    font-size: 40px;
    font-weight: 600;
    color: ${({ theme }) => theme.main };
    align-self: flex-start;
    margin: 0px 20px;
`;

export default function App() {
    return (
        <ThemeProvider theme = {theme}>
            <Container>
                <StatusBar
                    barStyle= "light-content"
                    backgroundColor={ theme.background }
                />
                <Title>TODO List</Title>
                <Input />
            </Container>
        </ThemeProvider>
    );
}

 

- App.js

import App from "./src/App";

export default App;

 

 

- ../component/Input.js

import React from "react";
import styled from "styled-components/native";

const StyledInput = styled.TextInput`
    width: 100%;
    height: 60px;
    margin: 3px 0;
    padding: 15px 20px;
    border-radius: 10px;
    background-color: ${ ({ theme }) => theme.itemBackground};
    font-size: 25px;
    color: ${ ({ theme }) => theme.text};
`;

const Input = () => {
    return <StyledInput />;
};

export default Input;

 

 

굳이 여기서 인풋 설정에 margin 설정을

margin : 50px, 100px

으로 변경해봐야..

 

보다시피 양 옆 마진이 변하진 않는다.

그런 이유로 전체를 꽉 채운 상태로 양 옆의 마진을 주고 싶다면, 화면에 요소를 가운데에 두고, 전체 화면의 길이를 구하고 비우고 싶은 마진 * 2를 준다(왼쪽 마진 + 오른쪽 마진).

 

그럼 전체 화면을 어떻게 구하느냐? Dimensions 혹은 useWindowDimensions를 이용해 구한다.

두 개의 차이는 무엇일까?

Dimension은 처음 값 로드 시 크기가 고정되기 때문에 화면 회전 시 값이 변경되어도 적용되지 않는다.

useWindowDimensions는 Hook를 이용해서 화면의 크기가 변경되면 값이 변경된다.

예시를 보자.

 

- ../component/Input.js

import React from "react";
import { Dimensions } from "react-native";
import styled from "styled-components/native";

const StyledInput = styled.TextInput`
    width: ${ ({ width }) => width - 40}px;
    height: 60px;
    margin: 3px 0;
	...
`;

const Input = () => {
    const width = Dimensions.get('window').width;
    return <StyledInput width = {width}/>;
};

export default Input;

 

혹은

 

import React from "react";
import { Dimensions, useWindowDimensions } from "react-native";
import styled from "styled-components/native";

const StyledInput = styled.TextInput`
    width: ${ ({ width }) => width - 40}px;
    height: 60px;
    margin: 3px 0;
	...
`;

const Input = () => {
    const width = useWindowDimensions().width
    return <StyledInput width = {width}/>;
};

export default Input;

 

스타일에 프로퍼티로 width(가로 화면 길이)를 받아서 마진을 뺀다.

const에 Dimensions.get('window').width 혹은 useWindowDimensions().width를 이용해서 전체 화면 가로 길이를 구하고, 프로퍼티에 width를 넣는다.

 

결과를 보자

 

 

양옆에 마진이 생긴다.