좌우로 스와이프 되는 영화 스와이프 스크린 화면을 개발

설치

npm i react-native-web-swiper --save

웹에서도 사용할 수 있는 web-swiper를 활용

TMDB Requirements

1. API 키 가져오기

• 등록된 tmdb 계정의 프로필 → 설정 → API에서 API 키 가져오기
• secret 파일에 따로 저장 후 사용

2. secret.ts

이 파일은 .gitignore을 통해 무시하도록 따로 설정

export const TMDB_KEY = "YOUR API KEY";

Movies.tsx

• now playing api 가져오기

import React from "react";
import styled from "styled-components/native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import Swiper from "react-native-web-swiper";

import { Dimensions } from "react-native";
import { TMDB_KEY } from "../secret";

const ScrollView = styled.ScrollView`
  background-color: ${(props) => props.theme.mainBgColor};
`;

const View = styled.View`
  flex: 1;
`;

const { height } = Dimensions.get("window");

const Movies: React.FC<NativeStackScreenProps<any, "Movies">> = ({
  navigation: { navigate },
}) => {
  const getNowPlaying = () => {
    fetch(
      `https://api.themoviedb.org/3/movie/now_playing?api_key=${TMDB_KEY}&language=en-US&page=1&region=KR`
    );
  };
  return (
    <ScrollView>
      <Swiper
        loop
        timeout={5}
        controlsEnabled={false}
        containerStyle={{ width: "100%", height: height / 4 }}
      >
        <View style={{ backgroundColor: "red" }}></View>
        <View style={{ backgroundColor: "blue" }}></View>
        <View style={{ backgroundColor: "red" }}></View>
        <View style={{ backgroundColor: "blue" }}></View>
      </Swiper>
    </ScrollView>
  );
};

export default Movies;

• Dimensions.get("window"): 윈도우의 높이를 가져옴
• loop: 리스트가 끝나면 처음으로 루프
• timeout: 자동으로 넘어가게 하고, 그 시간을 설정
• controlsEnabled: 스와이퍼의 컨트롤러 정보들을 출력

손가락으로 좌우 왔다갔다할 수도 있고, 자동으로 넘어가기도 하는 Swiper 구현 완료

화면 기록 2022-04-25 오후 2.51.28.mov