React Native 17 - 영화 정보 알림 앱
Post

React Native 17 - 영화 정보 알림 앱

17/05/2023
Jiyeon Park
5

결과화면

구현 기능

  • 영화 리스트 - 외부 api사용
  • 영화 상세 정보 - 제목,개봉일,소개,감독,배우,관련영상
  • 개봉일 캘린더 추가 기능
  • 개봉일 푸시 알림 기능

정리

영화 리스트 구현

  • 예제 데이터로 영화 목록 구현하기
    • ch1-3참고, 프로젝트명: MovieReminder, hermes빌드 끄기, ios,android패키지명통일,
    • react-navigation설치 . ch1-5참고, @react-navigation/native-stack함께 설치
      1

      npm i @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context
  • StatusBar 컴포넌트를 이용해서 상태표시줄 스타일 변경

openColor 패키지 사용

  • 다양한 색을 쉽게 사용가능 open-color

    • npm i open-color
    1
2
3
4
5
6
7

    import Colors from 'open-color';

const styles = StyleSheet.create({
  container: {
    borderColor: Colors.gray[6],
  },
});

API 이용하여 데이터 불러오기

  • TMDB (The Movie Data Base)API를 이용하여 영화 목록 가져오기

  • React Query를 이용하여 API 호출하기 tanstack

    • useQuery를 사용하면 loading,data 등을 자동으로 관리해줌
    • npm i @tanstack/react-query
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const { isLoading, error, data } = useQuery({
    queryKey: ["repoData"],
    queryFn: () =>
      fetch("https://api.github.com/repos/tannerlinsley/react-query").then(
        (res) => res.json()
      ),
  });

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

무한 스크롤 구현

영화 상세 페이지 구현

  • API호출
    • TMDB의 movies detail api 사용
    • ScrollView 컨텐츠에 스타일을 줄때에는 다음처럼 사용할것.
      1

      <ScrollView contentContainerStyle={styles.content}>
    • scrollview안에서 flatList가 수직방향일경우 사용할 수 없음. → 똑같이 수직방향이 겹치므로 (수평은 가능)
  • Horizontal List 구현

Linking API를 이용하여 외부 링크로 이동

1
2
3
4
5
6
7
8
9
10

- url키를 주면 외부 링크로 이동이 가능함

```
import { Linking } from "react-native";

const onPress = useCallback(() => {
  const url = `https://www.youtube.com/watch?v=${youTubeKey}`;
  Linking.openURL(url);
}, [youTubeKey]);
```

Native Module이 필요할 때

  • JS로 구현되지 않은 ios 및 android에서 제공하는 기능을 사용하고 싶을 때
    • 예시: 퍼미션 요청, 결제 등
  • Object-C, Java 등으로 쓰여진 라이브러리를 JS로 다시 작성하지 않고 사용할 때
  • 이미지 프로세싱과 같은 고성능 및 멀티스레드 코드를 네이티브 쪽에서 실행할 때
  • NativeModule은 JS,TS를 이용해서 Java, Objective-C,kotile,swift 등으로 작성된 코드들을 실행할 수 있게 도와줌
  • ios 캘린더 이벤트 등록 Native Module
    • ios캘린더에 영화 개발일 일정 등록 기능 구현
    • NativeModule을 이용하여 ios 네이티브 기능 이용
      • ios의 EventKit 프레임워크 이용
      • Swift를 이용하여 작성, bridge header도 같이 자동으로 생성

캘린더 등록 기능 구현

  • NativeModule을 이용하여 TypeScript로 네이티브 기능 호출

Android 캘린더 이벤트 등록 Native Module

  • NativeModule을 이용하여 Android 네이티브 기능 이용
    • android의 Calendar Provider API이용
    • Kotlin을 이용하여 작성

개봉일 푸시 알림 등록 기능 구현

  • 개봉일에 푸시 알림을 예약하는 기능 구현

  • Local Push Notification을 이용

  • 예약된 개봉일 푸시 알림 리스트 구현
  • 푸시 알림 취소 기능 구현
Develop, React-Native
React-Native