Real API와 React Native CLI를 사용하여 React Native Movies 앱 만들기

어느 날 아침에 일어나 밤새도록 생각했습니다 :D : 모바일 앱 개발을 위해 React Native 또는 Flutter 중 무엇이 더 나은가요?
사실 저는 두 프레임워크에서 정확히 같은 애플리케이션을 만들어보고 싶었습니다.
저는 리액트 네이티브로 했고 플러터로 만드는 중입니다.
React Native로 빌드하는 데 소요된 예상 시간은 약 16시간이었습니다.
지금 나는 그것을 설레게 하고 있습니다. 이미 9시간을 보냈고 거의 끝났습니다! (저도 공유할게요)

React Native Documentation 기반으로 설치 및 환경 설정 후

그런 다음 새 프로젝트를 만듭니다.

npx react-native init MoviesApp

모바일 앱에서 화면 간 탐색을 위한 외부 라이브러리인 React Native Navigation 도 사용했습니다.

앱의 구조는 다음과 같습니다.



프로젝트의 진입점은 APP.js입니다. 탐색을 위해 다른 구성 요소를 호출하고 페이지 스택을 추가했습니다.

import React, {useEffect, useState} from 'react';
import {ActivityIndicator, SafeAreaView, StatusBar, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import MainNavigator from './src/Navigators/MainNavigator';
import {ThemeColors} from './src/Theme';
import Toast from 'react-native-toast-message';

// API
import {apiKey} from './src/utils';

const colors = ThemeColors.colors;

const App = () => {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    if (apiKey.api_key) {
      setReady(true);
    }
    return () => {
      setReady(false);
    };
  }, []);

  return (
    <View style={{flex: 1, backgroundColor: colors.background}}>
      <StatusBar hidden={true} />
      {ready ? (
        <NavigationContainer>
          <MainNavigator />
        </NavigationContainer>
      ) : (
        // Just to check to insert your own Api Key. This would not go to customer
        <View>
          <ActivityIndicator size={'large'} />
          <Text style={{fontSize: 18, color: colors.white}}>
            Make sure you inserted your own API Key
          </Text>
          <Text style={{fontSize: 18, color: colors.white}}>
            Located at src/utils/keys
          </Text>
        </View>
      )}
      <Toast ref={ref => Toast.setRef(ref)} />
    </View>
  );
};

export default App;

메인 스택 내비게이션 구성 요소는 화면 구성 요소로 호출합니다.

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {Home, Detail, Search} from '../Screens';
import {Navbar} from '../Components';

// Theme
import {ThemeColors} from '../Theme';
const colors = ThemeColors.colors;

const Stack = createStackNavigator();

function MainStack() {
  return (
    <Stack.Navigator
      headerMode="screen"
      screenOptions={{
        headerStyle: {elevation: 0},
        cardStyle: {backgroundColor: colors.background},
      }}>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          // Add a custom Header to stack navigation
          header: ({navigation}) => <Navbar navigation={navigation} />,
          headerTransparent: true,
        }}
      />
      <Stack.Screen
        name="Detail"
        component={Detail}
        options={{
          header: ({navigation}) => (
            <Navbar main={false} navigation={navigation} />
          ),
          headerTransparent: true,
        }}
      />
      <Stack.Screen
        name="Search"
        component={Search}
        options={{
          header: ({navigation}) => (
            <Navbar main={false} navigation={navigation} />
          ),
          headerTransparent: true,
        }}
      />
    </Stack.Navigator>
  );
}

export default function MainNavigator() {
  return <MainStack />;
}

많은 세부 사항을 살펴본 후 영화 앱 생성에 대한 전체 설명을 만들었습니다.

환경을 올바르게 설정

화면 간 이동

화면을 동적으로 탐색합니다

.

영화 데이터베이스 API 사용

사용자 정의 스타일 추가

컴포넌트 기반 개발

반응 후크

기능성 부품

장르별 영화 가져오기

목록

동영상 검색 방법

이미지 갤러리

비디오 플레이어 및 해당 명령

Full Course and Explanation about Building React Native Movies App