React-native 배경이미지 넣기

페이지, 섹션 등 어떤 영역에 배경 이미지를 넣고 싶을때는,

import { ImageBackground } from "react-native";

<ImageBackground source={require("URL")} style={{width:"100%",height:"100%"}}>
  <콘텐츠>
</ImageBackground>

위와 같이 ImageBackground를 추가해서 감싸주면 된다.

 

단, 서드파티 라이브러리에서 땡겨오는 컴포넌트들이 고유의 background color 를 가지고 있는 경우가 많기 때문에, 그 때는 아래와 같이 일일이 배경색을 바꿔주거나,

<Card style={{ elevation: 0, shadowOpacity: 0, felx: 2, width: "90%", backgroundColor: "rgba(0,0,0,0.5)" }}>
  <CardItem header style={{ backgroundColor: "transparent" }}>
     <Content style={{ backgroundColor: "transparent" }}>
        <Text style={{ fontSize: 20, fontWeight: "bold", color: "#fff" }}>
        </Text>
     </Content>
   </CardItem>
</Card>

Styled-Components를 활용하여, 스타일을 적용한 컴포넌트를 만들어 사용하면 된다.