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 과정이 자동적으로 수행되기 때문에 다른 것들은 ..

1. React Navigation 소개 React Navigation은 화면 전환이라고 생각하면 된다. 화면 전환의 예시는 우리가 흔히 사용하는 화면 아래 탭 버튼을 눌렀을 때 보여지는 메인 화면이 바뀐다던지, 아이콘이나 그림이나 버튼을 클릭했을 때 다른 화면으로 이동한다던지 동작하도록 하는 기능들을 말한다. stack navagation - Moving between screens. 버튼을 눌러 화면 전환. drawer navigation - 화면 측면에서 오픈되는 새로운 창. tab navigation - 화면 상단이나 하단의 탭을 만들어 터치를 통해 화면을 전환. react navigation 에서 화면 전환을 다루기 위해서는 third-party library 가 꼭 필요하다. 다른 naviga..