인스타그램 만들기(React-Native CLI)

dev bourgeois·2024년 5월 22일

React-Native Study

목록 보기
5/5
post-thumbnail

인스타 앱 전체 구조 생성하기

npx react-native init ReactNativeInstaApp

기본 파일과 폴더 추가하기

모든 스크린 파일 생성하기

RNFE

Prettier/Prettier 에러 없애주기

React Nagivation을 이용해서 라우팅 구현하기

모듈 설치하기

npm install
@react-navigation/native
@react-navigation/native-stack
@react-navigation/bottom-tabs
@react-navigation/material-top-tabs --save

index.js 엔트리 파일

AppRegistry는 모든 React Native 앱을 실행하기 위한 JS 진입점
App 루트 Component는 AppRegistry.registerComponent에 자신을 등록해야 한다.
그러면 기본 시스템은 앱에 대한 번들을 로드한 다음 AppRegistry.runApplication을 호출하여 앱이 준비되면 실제로 앱을 실행할 수 있다.

name - 프로젝트에 사용되는 짧은 이름이며 TitleCase여야 한다.
(TitleCase는 모든 단어를 대문자로 표기하는 것)

displayName - 홈 화면의 앱 이름

App.js에 라우팅을 위한 소스 코드 작성

Stack vs Tab

Stack Navigator는 React Native 앱이 Stack을 사용하여 화면 간에 전환할 수 있는 방법을 제공한다.
예를 들어 로그인에서 가입 화면으로 이동하면 가입 화면이 로그인 화면 맨 위에 쌓이고 뒤로 이동하면 가입 화면이 스택에서 꺼진다.

Tab Navigator는 화면 하단이나 상단에 Tab이 있는 Navigator이며 다른 화면 사이를 전환하는 데 사용할 수 있다.
Tab Navigator는 Screen을 Component로 사용하거나 Stack을 Component로 사용할 수 있다.

링크텍스트

npm install react-native-screens react-native-safe-area-context

다시 npm start android 하면

screenOptions

탭의 이름을 없애고, 탭의 스타일을 바꿔주려면?

아이콘 사용하기(react-native-vector-icons 설치)

react native vector icons

npm install --save react-native-vector-icons

탭 아이콘 넣어주기

링크텍스트

Home 스크린 UI 생성하기

no inline style lint off

스토리 UI 생성하기

  1. 파일 생성하기
  1. Stories 컴포넌트를 Home 부모 컴포넌트로
  1. ScrollView를 이용해서 양쪽으로 이동할 수 있게 만들기
  1. 스토리 데이터 및 이미지 가져오기
  1. 스토리 UI 생성하기
  1. 해당 Status Screen 으로 이동

스토리 Status UI 생성하기

  1. 해당 Status Screen 클릭 시 보내준 name과 image 정보 가져오기
  1. UI 생성하기

Animated 라이브러리

현재 구현해야 하는 부분은 회색줄이 시간의 흐름에 따라 이동하며 주어진 시간이 끝날 때 100%로 이동하는 애니메이션을 구현해야 한다.
이것을 구현하기 위해서 사용할 것이 바로 Animated 라이브러리이다.
Animated 라이브러리는 애니메이션을 유연하고 쉽게 구축하고 유지하도록 설계되었다.

https://reactnative.dev/docs/animated

  1. Animated 라이브러리를 이용한 Progress Bar 생성
    -여기서 interpolation 이라는게 사용된다.
  1. interpolation ?
    "Interpolation provides a means of estimating the function at intermediate points"
    "Interpolation은 중간 지점에서 함수를 추정하는 수단을 제공한다."
  1. 구현 방법
    width 가 0% 에서 5초가 되면 width가 100%가 되게 만듭니다.
  1. Animated 라이브러리 이용 방법

    애니메이션을 만들기 위한 핵심 워크플로(Work Flow)는
    1. Animated.Value를 만들고
    2. 애니메이션 구성 요소의 하나 이상의 스타일 속성에 연결한 다음
    3. Animated.timing()을 사용하여 애니메이션을 통해 업데이트를 구동하는 것

(1) Animated value 생성

애니메이션 값을 직접 수정하면 안된다.
useRef Hook을 사용하여 변경 가능한 ref 객체를 반환할 수 있다.
이 ref 객체의 current 속성은 지정된 인수로 초기화되며 Component LifeCycle 주기 동안 지속된다.

(2) Animated value 와 스타일 속성에 연결하기

공식문서 예제에서는 opacity이기에 숫자를 바로 넣어줘도 되지만
우리가 할 것은 width styl에 퍼센트로 0% ~ 100%로 만들어 줄 것.
그럴 때는 어떻게 해야 할까?

✅ interporlate() 함수 이용

interpolate() 함수를 사용하면 입력 범위를 다른 출력 범위에 매핑할 수 있다.
Animated Value가 0에서 5로 바뀔 때 다른 출력 범위 0% ~ 100%로 매핑해준다.

(3) Animatd.timing() 을 이용해서 Animated Value 업데이트

네이티브 드라이버를 사용하여 애니메이션을 시작하기 전에
애니메이션에 대한 모든 것을 네이티브로 전송하여 네이티브 코드가 모든 프레임에서 브리지를 거치지 않고도 UI 스레드에서 애니메이션을 수행할 수 있도록 한다.
애니메이션이 시작되면 애니메이션에 영향을 주지 않고 JS 스레드를 차단할 수 있다.


애니메이션 구성에서 useNativeDriver: true를 지정하여 기본 드라이버를 사용할 수 있다.

애니메이션은 애니메이션에서 start()를 호출하여 시작된다.
start()는 애니메이션이 완료될 때 호출될 완료 콜백을 받는다.
애니메이션이 정상적으로 실행되면 완료 콜백이 {finished: true}와 함께 호출된다. 애니메이션이 완료되기 전에 stop()이 호출되어 애니메이션이 완료된 경우(예: 제스처 또는 다른 애니메이션으로 인해 중단되었기 때문에) {finished: false}를 수신한다.

  • 5초 후에 Home Screen으로 돌아가기

react-native-status-bar-height

SafeAreaView로 감싸줬음에도 불구하고 UI가 StatusBar 부분과 겹쳐져 있다.
이럴 때는 StatusBar부분의 Height을 임의로 구해서 Top: statusbar height으로 한다.

https://github.com/ovr/react-native-status-bar-height

npm install react-native-status-bar-height

포스트 UI 생성하기

  1. 파일 생성하기
  1. Stories 컴포넌트를 Home 부모 컴포넌트로
  1. Post 데이터
  1. Posts
  1. PostItem 컴포넌트 생성
  1. Post Header
  1. Post Image
  1. Post Action
  1. Post Comments

안드로이드 실행 시 에러 해결

https://github.com/react-native-video/react-native-video/issues/2468#issuecomment-913709636

profile
dev bourgeois
이전 포스트

React Native CLI를 이용한 개발환경 세팅하기

0개의 댓글