wazac

react-router로 구조를 짜고 나면 자동으로 헤더에 name이 들어가 있고 기본적으로 흰색에 검은 글씨로 되어있다. 이를 커스텀하기 위해 screenOption값을 넣어줄 수 있다. 공통으로 처리하려면 Stack.Navigator에 일괄로 처리할 수 있고, 같은 navigator에 있는 screen들을 group으로 묶어서 따로 처리해 줄 수 도 있다. 1. 공통으로 옵션 주기 title을 옵션에 넣게 되면, HomeStack.Screen 안에 name 대신 HomeStack.Navigator 안의 title을 보여준다. 스타일은 headerStyle 안에 작성해 주면 된다. 2. 페이지별로 각각 주기 페이지별로 각각 커스텀을 하고 싶다면 Stack.Group을 사용하여 각각 묶을 수 있다. he..

- react navigation: https://reactnavigation.org/docs/getting-started/ - 다음 버전을 사용하였습니다. "@react-navigation/native": "^6.0.11", "@react-navigation/stack": "^6.2.2", 리액트 네이티브에서 사용하는 react-navigation은 stack 방식을 사용한다. stack 방식은 클릭을 했을때 화면이 하나씩 stack에 쌓이는데 그중 최상위 것을 보여주는 방식이다. 그리고 back 버튼을 누르면 최상단의 화면을 제거하므로써 이전 화면을 보여준다. * 설치 expo install @react-navigation/native expo install @react-navigation/stack..

사실 expo 공식 문서에 다 나와있다. 근데 공식문서 뒤지기도 귀찮으니 정리해 두기로 했다. 공식 문서 url : https://docs.expo.dev/guides/using-custom-fonts/ 1. 설치 @expo-google-fonts/inter 를 먼저 설치해 준다. $ expo install expo-font @expo-google-fonts/inter 2. 적용할 폰트 찾기 https://fonts.google.com/ 사이트에 들어가서 원하는 폰트를 찾고 다운로드한다. 혹은 이름만 알아도 되는 모양이다. 나는 눈에 띄게 비교하기 위한 폰트를 찾았다. "Edu SA Beginner" 라는 글씨체를 찾았다. 3. App에 component가 render되기전에 적용하기 import { u..

입력을 해야하는 화면에서 TextInput에 focus 가 되면 자동으로 Keyboard가 올라오는데, 아무곳이나 클릭했을때 이를 다시 내려가게 하고싶다. TouchableWithoutFeedback, Keyboard 를 사용하여 간단하게 구현할 수 있다. \ TouchableWithoutFeedback 태그로 전체 영역을 감싼되 onPress 함수에 Keyboard.dismiss() 함수만 호출하면 간단하게 해제된다. 예제코드) return ( { console.log('dismissed keyboard') Keyboard.dismiss() }}> ); } 생각보다 정말 간단하다. 습관적으로 javascript로만 해결하려고 했는데... 그냥 웬만하면 다 불러오면 된다. 허허 머쓱코쓱🙄

최근에 리액트 네이티브 공부도 시작했다. 아직 초반이라 해매는 중이지만 하나씩 정리하려고 한다. 기본 현재 디렉터리에 설치하는 경우 디렉터리명 대신 . 를 사용한다. expo init (디렉터리명) expo init . 네비게이션 ## react navigation : https://reactnavigation.org/ npm install @react-navigation/native expo install react-native-screens react-native-safe-area-context ( for expo ) - stack npm install @react-navigation/stack npm install react-native-gesture-handler ## icons : https:/..