66일차 TIL : RN 영화 리뷰앱 - Movies

변시윤·2023년 1월 4일
0

내일배움캠프 4기

목록 보기
69/131
post-custom-banner

학습내용

  • expo-iOS 시뮬레이터 연결
  • Movies 스크린 보완

expo-iOS 시뮬레이터 연결

연결하기에 앞서 Xcode가 설치되지 않았다면 Xcode부터 설치한다.

  1. 터미널에서 프로젝트 경로로 이동
  2. expo start --ios 실행

yarn react-native run-ios 하니까 계속 에러 메시지가 떠서 package.json 보다가 뭔가 명령어처럼 생긴 게 있길리 실행해봤더니 바로 됨.... 이거 땜에 또 몇 시간 날렸는데 개간단해서 킹받는다....

근데 디바이스 변경이 안된다... 내 아이폰은 일반 모델이고 앞으로 플러스나 프로 쓸 생각도 없는데 ㅎ 구글링 해봐도 잘 안돼서 그냥 이 정도로 타협하기로 함 할 일도 많은데 여기에 힘 쓰지 말고 걍 하자



Movies 스크린 보완

import { StyleSheet, ScrollView } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import Swiper from "react-native-swiper";
import { SCREEN_HEIGHT } from "../util";

const Movies = ({ navigation: { navigate } }) => {
  return (
    <ScrollView>
      <Container>
        <Swiper height="100%" showsPagination={false} autoplay={true} loop>
          <SwiperMovie>
            <HeaderScreenshot
              source={{
                uri: "https://www.themoviedb.org/t/p/original/s16H6tpK2utvwDtzZ8Qy4qm5Emw.jpg",
              }}
            />
            <LinearGradient
              style={StyleSheet.absoluteFill}
              colors={["transparent", "rgba(0,0,0,0.2)", "black"]}
            />
            <HeaderMovie style={StyleSheet.absoluteFill}>
              <HeaderPoster
                source={{
                  uri: "https://www.themoviedb.org/t/p/original/v5M7vduYnWtdKaBP1jyjD5FyOdA.jpg",
                }}
              />
         </SwiperMovie>
         <SwiperMovie>...</SwiperMovie>
         <SwiperMovie>...</SwiperMovie>
       </Container>
     </ScrollView>
   );
};
  • LinearGradient
    그라데이션 효과. colors 속성은 갯수 제한이 없다.

  • absoluteFill
    element들을 겹쳐야 하는 경우에 사용. CSS로 지정하는 것보다 훨씬 간결하다.

  • react-native-swiper
    스와이퍼 기능을 제공해주는 라이브러리. 다양한 커스텀이 가능하다.

Dimensions

util.js

import { Dimensions } from "react-native";

export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
  Dimensions.get("window");

Movies.jsx

const SwiperMovie = styled.View`
  flex: 1;
  height: ${SCREEN_HEIGHT / 3.3 + "px"};
`;

widthheight를 자동으로 계산해주는 Dimensions 속성을 사용하면 디바이스 내에서 해당 컴포넌트가 차지하는 비율을 정확하고 간결하게 지정할 수 있다.

profile
개그우먼(개발을 그은성으로 하는 우먼)
post-custom-banner

0개의 댓글