7. [Stack] Header Bar 커스터마이징 헤더바에 로고를 넣는 방법을 알아보자. src 폴더 내에 assets/pics 라는 이름으로 로고 아이콘을 저장할 폴더를 만든다. 그리고 로고 아이콘 이미지 파일을 해당 폴더 내에 저장한다. 그럼 준비는 끝난다. 이미지를 가져오는 것이기 때문에 App.js 에 Image를 추가로 import 해준다. import {StyleSheet, Text, View, Image} from 'react-native'; logoTitle = () => { return ( ); }; logoTitle 이라는 이름의 함수를 만들었다. 여기서는 Image 태그를 사용하여 아이콘 이미지를 가져온다. style 로 크기를 지정해 준 뒤, source 에 파일 경로를 작성한다...

6. [Stack] 여러 화면에 공통 Style 적용 여러 화면에 공통으로 Style을 적용하기 위해서는 Stack Navigator에 스타일을 지정해주면 된다. 여기서 프로퍼티 이름이 달라지는데 options가 아니라 screenOptions라는 이름으로 프로퍼티를 주면 된다. 그리고 모든 화면에 공통으로 스타일을 적용하고 단 하나의 화면만 스타일을 다르게 주고 싶으면 기존의 해당 화면의 Stack Screen에서 options 프로퍼티를 주면 된다. App.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} ..

5. [Stack] Header Bar 설정 헤더바의 이름이나 색상 등을 바꿀 수 있는 방법에 대해 알아보자. App.js에서 정의된 스크린에 options라는 프로퍼티를 주고 title이라는 값을 주면 헤더바의 글자를 바꿀 수 있다. 이렇게 하면 초기값으로 헤더 타이틀을 지정할 수 있지만, 그 후에도 임의로 조정 가능하다. 아래 코드처럼 this.props.navigation.setOptions를 통해 헤더바의 설정을 바꿀 수 있다. 글자 뿐 아니라 글자색과 배경색을 바꿀 수도 있다. { this.props.navigation.setOptions({ title: 'Changed!!!', headerStyle: { backgroundColor: 'pink', }, headerTintColor: 'red'..

4. [Stack] Navigation Params params를 이용하면 화면 이동 시에 데이터를 주고받을 수 있다. route라는 개념을 알아야 하는데 길이라는 뜻인데 스크린 각각이 루트가 된다. 아래 코드에서는 Home route, User route 가 된다. 원래는 가장 위에 선언된 스크린이 가장 먼저 뜨게 되는데, 아래 코드처럼 Navigator에 initialRouteName을 통해 가장 먼저 뜨는 스크린을 지정할 수 있다. Home 스크린에서 User 스크린으로 데이터를 보낼 건데 React Native에서는 데이터를 주고받는 것을 '파라미터를 루트로 패싱한다'고 표현한다. Screen name 다음 파라미터로 보내고 싶은 데이터를 전달한다. {} 안에 쓴 것들이 User 스크린으로 보내는..

3. [Stack] 화면 Linking stack-navigator - 버튼이나 사진을 눌렀을 때 화면을 전환시키는 기능. React Navigation을 쓰기 위해서는 모든 컴포넌트들을 NavigationContainer라는 태그로 감싸줘야 한다. 그리고 StackNavigator를 쓰기 위해서는 createNativeStackNavigator를 import 해야 한다. NavigationContainer는 Navigation 구조랑 상태를 관리하기 위한 컴포넌트로 모든 Navigation 구조는 NavigationContainer 태그 안에 들어가야 한다. createNativeStackNavigator는 screen이랑 Navigator라는 2개의 프로퍼티를 리턴하는 함수이다. 화면이 렌더링되는 부..

2. React Navigation 설치 https://reactnavigation.org/docs/getting-started https://reactnavigation.org/docs/getting-started/ reactnavigation.org 위 사이트를 들어가면 설치 과정이 상세히 나온다. react-native init 위의 명령어로 새로운 패키지를 만들어 준 뒤, 아래의 코드들을 순서대로 터미널에 작성하여 초기 설치를 진행한다. npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context 버전이 업데이트되면서 linking 과정이 자동적으로 수행되기 때문에 다른 것들은 ..