한국어
[React Native] 배경 이미지 크기 자동으로 맞추기
게시: 2021년 2월 3일
reactnative
resizeMode
background-image
크기 조절
1. 서론
출시 준비중인 어플리케이션의 백그라운드 이미지를 설정하다가 width, height를 각각 100%로 지정했음에도 기기 해상도 별로 크기가 제각각으로 깨지는 현상이 발생했다. 이에 방법을 찾아보니 생각보다 간단하게 해결되어 이 포스팅을 작성한다.
2. 해결방법
아래의 예시 코드처럼 resizeMode="stretch" 를 적용하면 지정한 크기에 꽉 차게 배경 이미지가 생성되고 해상도에 상관 없이 깨지지 않고 유지된다. 만약, 다른 방식을 원하는 사람들은 아래의 stackoverflow 주소를 들어가면 여러 가지 해결 방법들을 볼 수 있다.
import React from "react";
import styled from "styled-components/native";
const Container = styled.SafeAreaView``;
const BGImageContainer = styled.ImageBackground`
width: 100%;
height: 100%;
`;
const App = () => {
return (
<Container>
<BGImageContainer
source={require("your_background_image_path")}
resizeMode="stretch"
>
{/* Input your inner code */}
</BGImageContainer>
</Container>
);
};
export default App;