Web開発/React.js
React-native 배경이미지 넣기
Albatro33
2020. 3. 3. 08:55
페이지, 섹션 등 어떤 영역에 배경 이미지를 넣고 싶을때는,
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를 활용하여, 스타일을 적용한 컴포넌트를 만들어 사용하면 된다.