데이터 불러오기
install
npx expo install expo-linear-gradient
import
import { LinearGradient } from "expo-linear-gradient";
imageStyle={opacity: 0.3} 로 했던 어제
이제 LinearGradient 속성으로 간단하게 그림자 효과를 줄 수 있다.
<BgImgSt
source={{
uri: getImgPath(movie.backdrop_path),
}}
style={StyleSheet.absoluteFill}
// imageStyle로 주니까 배경만
// imageStyle={{ opacity: 0.3 }}
/>
<LinearGradient
style={StyleSheet.absoluteFill}
colors={["transparent", "black"]}
/>
<Row>
<ImgSt
source={{
uri: getImgPath(movie.poster_path),
}}
></ImgSt>
<Column>
<View style={{ flexDirection: "column" }}>
<Title>{movie.title}</Title>
<Rating>⭐️{movie.vote_average}/10</Rating>
<Overview>
{movie.overview.slice(0, 150)}
{movie.overview.length > 150 && "..."}
</Overview>
</View>
</Column>
// 가장 바깥에서 감싸주는 View
const DescSt = styled.View`
/* background-color: blue; */
/* align-items: center; */
/* width: 100%; */
height: ${SCREEN_HEIGHT / 3 + "px"};
flex: 1;
justify-content: flex-end;
background-color: green;
`;
// 디테일 컬럼
const Column = styled.View`
width: 65%;
margin-left: 10px;
margin-bottom: 10px;
`;
// 포스터와 컬럼을 감싸는 TouchableOpacity
const Row = styled.TouchableOpacity`
flex: 1;
flex-direction: row;
align-items: flex-end;
`;
// 배경
const BgImgSt = styled.ImageBackground`
width: 100%;
height: 100%;
`;
배경 이미지가 어두워진 효과를 볼 수 있다!
+ 레이아웃을 잘 짜놔야 코딩하기 쉽다는 것을.. 뼈져리게 느끼는 중..
포스터 이미지와 타이틀, 설명을 감싸는 View의 위치를 잡아주는게 이렇게 어려울 일인지..
상위 태그에 오버레이 시키나요...
<- 더 찾아보기position: 'absolute', left: 0, right: 0, top: 0, bottom: 0
대신
style={StyleSheet.absoluteFill}
으로 쓸 수 있다.
<DescSt>
<BgImgSt
source={{
uri: getImgPath(movie.backdrop_path),
}}
style={StyleSheet.absoluteFill}
/>
<LinearGradient
style={StyleSheet.absoluteFill}
colors={["transparent", "black"]}
/>
Dimensions : 📱 디바이스의 피지컬 높이, 넓이를 계산해주는 속성
//util.js
import { Dimensions } from "react-native";
export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
Dimensions.get("window");
{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT }
구조분해할당으로 width와 height값을 받아오고 SCREEN_WIDTH, SCREEN_HEIGHT으로 리네이밍해주었다.
const DescSt = styled.View`
height: ${SCREEN_HEIGHT / 3 + "px"};
flex: 1;
justify-content: flex-end;
background-color: green;
`;
실제 디바이스 높이를 3으로 나누고 "px"를 붙이면 스타일 적용이 가능하다.
vscode 터미널에서 설치
npm i react-native-swiper --save
import Swiper from 'react-native-swiper'
<Swiper height="100%" showsPagination={false} autoplay loop> {nowPlayings.map((movie) => ( <Slide key={movie.id} movie={movie}></Slide> ))} </Swiper>
적용하고자 하는 태그를 Swiper 태그로 감싸준다.
height : "100%"
로 주면 자식의 스타일을 상속받는다.
showsPagination : {false}
- 하단 ● 모양의 pagination을 가릴 수 있다.
로컬 이미지를 가져오는 메서드
<BgImgSt
source={require("../assets/background.jpeg")}
>
웹 이미지를 가져오는 메서드
{uri}
⬅️ 객체 안에 선언함
<TRPoster source={{ uri: getImgPath(movie.poster_path) }} />
+ 반복되는 경로를 함수로 만들자.....
// util.js
export const getImgPath = (path) => {
return `https://image.tmdb.org/t/p/w500${path}`;
};
path 값이 바뀔 때마다 새로운 url이 할당된다.