모바일 개발 썸네일형 리스트형 만약에 trieds to ~~ 중복됐다고 뜨면 npm udate 하고 껐다 키기 더보기 Header Button 달기 Header buttons | React Navigation (1) Screen Component의 옵션 이용해서 헤더 버튼 달기 스크린 컴포넌트의 Options에서 headerRight, headerLeft key 값에다가 함수형 컴포넌트를 value로 기입한다. 그러면 해당 함수형 컴포넌트의 로직 대로 움직인다. 우리는 해당 함수형 컴포넌트가 태그를 반환하도록 만들었다. 를 따로 쓰지 않아도 돌아가는 것 보니, 저번 설명에서 처럼 Screen의 Header 전체를 감싸는 View 태그가 내장되어 있는 것 같다. function StackScreen() { return ( , headerRight: () => ( alert('This is a button!')} title="Info" color="#f.. 더보기 React Navigation Docs 정리(Getting Started ~ Header bar 설정) 1. React Navigation 설치 Getting started | React Navigation React Navigation reactnavigation.org 2. React Navigation에 대해, Hello React Navigation | React Navigation React Navigation reactnavigation.org 우리는 먼저 가장 쉽고 기본적인 Navigator인 Stack Navigator를 통해 화면 이동하는 방법을 습득하고, 다른 종류의 네비게이터를 알아보겠다. 네비게이터는 RN 내장 라이브러리가 아니라서 따로 설치해서 써야 한다. 각 Navigator 마다 고유 라이브러리가 다 따로 존재하니 참고 바란다. (1) Browser와 StackNavigator의.. 더보기 VS Code에서 React-Native 이용 시 자동 import가 react-native/types로만 되는 경우 해결 법 사진은 react-native-web으로만 되는 경우를 가져왔다. (내가 해당 오류가 날 때 캡쳐를 하지 못했다.) 하지만 위의 경우 처럼 컴포넌트에 맞는 자동 import를 할 때, 'react-native'가 뜨지 않고, 다른 경우가 뜬다면 밑의 해결 방법으로 해결 할 수 있다. *프로젝트 디렉토리 밖에서 밑의 명령어를 터미널에 입력하여 실행한다. 위와 같은 문제가 일어나는 이유는, node-modules 안의 모듈들 간의 충돌로 인하여 일어난다고 한다. 따라서 @types/react-native를 다시 깔아주면 된다. 나는 프로젝트 디렉토리에서 계속 깔아봐도 문제가 해결되지 않아서 프로젝트 디렉토리의 부모 디렉토리로 넘어가서 해당 명령어를 실행 했더니 되었다. 이 문제로 인해 1시간 정도 디깅 했다.. 더보기 ICon, Badge, Button, Spacer,Divider 만들기 1. Icon 별 거 없다. expo Vector Icon에 필요한 3가지 요소 name, size, color를 인수로 받아서 icon을 생성하면 끝이다. 2. Badge children은 앞에서도 설명했듯이 부모요소의 태그 사이에 들어가는 텍스트를 의미한다. 해당 컴포넌트는 텍스트 우측 상단에 위와 같이 알림 뱃지를 붙이는 태그이다. 하지만 위와 같이 알림 횟수를 카운트 하지 않고 new를 의미하는 N으로 대체한다. 위 컴포넌트는 겉의 View와 속의 View 이중 구조로 되어 있는데, 겉의 View에는 인수로 받은 children을 쓰고 속의 View에는 뱃지 내용을 썼다. 이렇게 View를 이중구조로 가른 이유는 뱃지를 우측 상단에 위치시키기 위함이다. 뱃지의 style에서 position: ab.. 더보기 Text , Image 컴포넌트 커스터마이징 1. Text 컴포넌트 커스터마이징 (1) 코드리뷰 해당 컴포넌트는 color, fontsize을 커스터 마이징하는 Text 컴포넌트이다. 밑에는 Typography의 타입을 검사하는 PropTypes라는 속성을 사용했다. 해당 PropTypes 속성을 쓸려면 이걸 설치 해야한다. propTypes라는 타입 검사기의 내부는 {Property: PropTypes.원하는 타입 }형태로 쓰고 해당 속성의 인수로 원하는 타입이 들어오지 않았을 시 Warn 경고문을 화면에 띄운다. https://ko.legacy.reactjs.org/docs/typechecking-with-proptypes.html 위 링크는 propTypes의 사용법에 대해 적혀 있다. 타입을 검사하는 방법이 다양하게 있다. 우리는 위의 예시.. 더보기 코드를 컴포넌트화 시켜서 유지, 보수에 용이하고, 가독성도 좋은 프로그램 만들기 1. 중복되는 코드를 컴포넌트 화 해버리는 이유 **컴포넌트 화 란? 중복되는 코드를 하나의 컴포넌트(함수)로 만드는 것을 의미한다. 컴포넌트 화 시키는 이유는, 첫 번째 전체 코드의 코드양이 줄어든다. 여러 줄 짜리 코드도 함수 하나를 호출하여 그 안에 인수를 집어넣는 방식으로 표현하면 코드 양이 훨씬 줄어 가독성이 좋아진다. 해당 return 내부의 필요한 모든 코드들을 컴포넌트 호출을 통해 표현했다. 컴포넌트 호출 6번으로 return 문 내부를 필요한 것을 전부 표현했는데, 만약 코드로 위 사항을 전부 다 표현했다면, 스크롤바를 한참 내렸어야 할 것이다. 두 번째, 유지보수가 용이하다. A란 코드가 5번 중복된다고 하자. 만약 2번째 4번째 A코드에서 버그가 발생하면 우리는 그 코드들을 찾아서 일.. 더보기 React-Navigator를 이용한 화면 이동 (2) 이번에는 TabBarNavigation을 써보고 해당 TabBarNavigation을 다시 Stack Navigator안에 넣어서 표현 해보았다. TabBar 구조도 다를 것 없다. 기본 화면은 맨 왼쪽 탭이 나오고 나머지 탭들을 누를 때마다, focus가 옮겨져 해당 화면이 render 된다. 다른 화면으로 포커스를 옮겨도 이전 화면들이 unmount되어서 랜더 되었던 게 사라지는 것은 아니다. 다른 화면들은 처음 render된 후 그대로 유지된다. 1. 로직 구조도는 다음과 같다. 각 Navigator간의 계층이 밑과 같이 나누어져 있다. 위의 설명처럼 우리는 Level1 Stack의 첫번째 층인 BoomTab에서 Level3 Stack의 ScreenA를 보다가, ScreenA가 B를 호출함에 따라 .. 더보기 이전 1 2 3 4 ··· 7 다음
