[TIL] 내배캠4기-React Native-66일차

• LinearGradient 속성
• StyleSheet.absoluteFill
• Dimensions 속성
• <Swiper>
  • height
  • showPagination

• 로컬 이미지와 웹 이미지 불러오기
  • require
  • uri

---

데이터 불러오기

• TMDB - API
• Promise.all()

LinearGradient 속성

LinearGradient 공식 문서

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의 위치를 잡아주는게 이렇게 어려울 일인지..

StyleSheet.absoluteFill

.absoluteFill 문서

• 레이아웃 오버레이 할 때 씀
• 상위 태그에 오버레이 시키나요... <- 더 찾아보기

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 속성

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"를 붙이면 스타일 적용이 가능하다.

Swiper

react-native-swiper 문서

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 태그로 감싸준다.

Swiper 속성

height : "100%" 로 주면 자식의 스타일을 상속받는다.
showsPagination : {false} - 하단 ● 모양의 pagination을 가릴 수 있다.

이미지 불러오기

require

로컬 이미지를 가져오는 메서드

<BgImgSt
source={require("../assets/background.jpeg")}
>

uri

웹 이미지를 가져오는 메서드
{uri} ⬅️ 객체 안에 선언함

<TRPoster source={{ uri: getImgPath(movie.poster_path) }} />

uri 팁

+ 반복되는 경로를 함수로 만들자.....

// util.js
export const getImgPath = (path) => {
  return `https://image.tmdb.org/t/p/w500${path}`;
};

path 값이 바뀔 때마다 새로운 url이 할당된다.