반응형
반응형
필요성
리액트 네이티브에서 이미지를 배경으로 만들고 싶을 때가 종종 있다. 이미지를 배경으로 사용하고 싶을 때에는 <ImageBackground/> 를 활용하면 되는데 styled-component를 함께 활용할 때는 아래와 같이 사용하면 된다.
주의해야 할 점은 height와 weight를 반드시 적어줘야 이미지가 보인다
import React from 'react';
import Styled from 'styled-components/native';
const ImageBackground = Styled.ImageBackground`
flex: 1;
height: 100%;
weight: 100%;
opacity: 0.8;
`;
const Background = (props: any) => {
return (
<ImageBackground
source={{
uri: 'https://cdn.pixabay.com/photo/2021/10/19/09/46/nature-6723133_1280.jpg',
}}
/>
);
};
export default Background;
그리고는 위에서 생성한 Background 컴포넌트를 넣고자 하는 스크린에 위치시켰는데, 배경이미지가 모든 화면을 다 덮어버린다.
난 배경이미지가 내가 만들어놓은 컴포넌트 뒤에 깔렸으면 좋겠다고...
해결방법 : absolute 활용하기
처음에는 여기에 z-index를 적용해야하나 고민을 했었는데...
리액트 네이티브에서는 position이 absolute 아니면 relative 둘 중에 하나를 사용하면 되고, 디폴트값은 relative인데 이제 배경화면에 absolute를 지정하여 다른 컴포넌트들과 relative 관계를 끊어버려야 한다
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;import React from 'react';
import Styled from 'styled-components/native';
const ImageBackground = Styled.ImageBackground`
flex: 1;
height: 100%;
weight: 100%;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
`;
const Background = (props: any) => {
return (
<ImageBackground
source={{
uri: 'https://cdn.pixabay.com/photo/2021/10/19/09/46/nature-6723133_1280.jpg',
}}
/>
);
};
export default Background;
그리고 만든 Background 컴포넌트를 스크린에서 원하는 곳에 적용하였다.
RN 공식 docs에서 <ImageBackground>를 열고 닫고 중간에 Text 컴포넌트를 활용한 사례를 보고 나도 동일하게 <Background>를 열고 겹쳐질 컴포넌트들을 넣고 </Background>로 닫았다.
const Main = ({}: Props) => {
return (
<SafeArea>
<Head>
<Header />
</Head>
<Body>
<Background>
<BodyChilFilter>
<ChilFilter />
</BodyChilFilter>
<BodyCardScroll>
<CardScroll />
</BodyCardScroll>
</Background>
</Body>
</SafeArea>
);
};
그런데 여전히 안된다... 왜지?
해결방법 : <Background/>로 한번에 쓰기
명확한 이유는 모르겠으나 위의 예시처럼 열고 닫지 않고 한번에 컴포넌트를 쓰니까 성공했다
const Main = ({}: Props) => {
return (
<SafeArea>
<Head>
<Header />
</Head>
<Body>
<Background />
<BodyChilFilter>
<ChilFilter />
</BodyChilFilter>
<BodyCardScroll>
<CardScroll />
</BodyCardScroll>
</Body>
</SafeArea>
);
};
반응형
'프론트엔드 앱 > React-native' 카테고리의 다른 글
| recoil을 활용하여 user-defined hooks 만들고 상태관리하기 (0) | 2021.11.24 |
|---|---|
| [React Native] src를 절대 경로로 설정하기 (0) | 2021.11.19 |
| React Native Navigation 상단상태바 없애기 (0) | 2021.11.12 |
| TS에러'{ children: Element[]; }' 유형에 'IntrinsicAttributes' 유형과 공통적인 속성이 없습니다.ts(2559) (0) | 2021.11.11 |
| React Native Unrecognized font family 에러 해결하기 (0) | 2021.10.23 |