분류 전체보기
-
[RN] react -native fire base 설정 시 pod을 이용하여 Ios sdk 설정 방법web study/react-native 2022. 1. 7. 20:17
오늘도 올리는 삽질로그... 회사에서 개발하고 있는 앱에 push 알람을 사용해야 할 필요가 있어 firebase를 사용하려고 세팅을 시작하던 중 공식 문서들을 열심히 보고 xcode에서 열심히 sdk 설정을 해도 계속 에러가 떠서 절망에 빠져있던 찰나 열심히 firebase를 뒤지다 보니 아래와 같은 해결법을 얻었다 https://firebase.google.com/docs/ios/setup?hl=ko#available-pods Apple 프로젝트에 Firebase 추가 | Firebase Documentation 의견 보내기 Apple 프로젝트에 Firebase 추가 기본 요건 다음을 설치합니다. 프로젝트가 다음 요구사항을 충족하는지 확인합니다. 프로젝트에서 다음 플랫폼 버전 이상을 타겟팅해야 합니다..
-
[RN] onLayout 사용 시 android에서 앱 꺼짐 현상web study/react-native 2022. 1. 6. 19:54
요새 몸 건강도 안좋고 해서 포스팅을 안하고 있었는데 오늘 할 포스팅 내용의 원인을 정확히 몰라 이건 꼭 기록해둬야겠다 싶어서 남기려 한다. rn에서 onLayout 이벤트를 사용하여 컴포넌트의 크기와 위치를 계산하여 특정 버튼을 클릭하면 해당 컴포넌트의 위치로 스크롤 되게 하는 코드를 짜놧었다. 근데 dev 환경에서 실행 했을 때는 잘 되던 친구가 빌드를 해서 실제로 실행하려고 보니 해당 컴포넌트가 호출 될 때 마다 앱이 꺼지는 현상이 발생했다. 원인을 찾던 중 onLayout이 실행 될 때 발생한다는 것을 깨닳고 별의 별 노가다를 다 해봣는데 정상적으로 실행이 안되서 왜 이러나 고민하던 찰나 다른데에서는 onLayout이 정상적으로 실행되고 있어 2개를 비교해보니 아주 약간의 차이가 있었다. { ca..
-
[TIL] navigation 중첩 네비게이션 사용 시 중첩오류TIL 2021. 11. 3. 19:46
console.error the action 'navigate' with payload was not handled by any navigator 위와 같은 에러를 뱉었다. 내용이 뭔고 하니 내가 입력한 이름의 경로가 없다는 것인데 왜냐하면 내가 구현한 내비게이션은 중첩된 구조여서 접근하고자 하는 페이지와 연결이 끊겨 있어 불가능 하다는 것이다. 해결 방법은 간단했다. 아래와 같이 stack navigation의 이름과 screen을 입력해주면 된다. navigation.navigate('main', {screen: 'order'}); main 이라는 네비게이션 안에 있는 order라는 스크린에 접근한다는 뜻이다. navigation 버전 6 부터는 commonActions를 사용하라는게 권장되는 것 같..
-
[RN] RN의 애니메이션web study/react-native 2021. 10. 14. 20:26
RN에서의 애니메이션은 복잡한듯 복잡하지 않고 안복잡한듯 복잡하다... 사용할 때 마다 찾아보는 나의 기억력이란.... 그래서 그냥 간단하게 자주 사용하는 것만 정리해서 써놓고 참고하려 정리해 봐야겠다!! 일단 RN에서는 애니메이션 전용 태그가 따로 있다. 그래서 Animated를 react-native 모듈로부터 호출해 와야 한다. import {Animated} from 'react-native'; 호출했다면 useRef 훅을 이용하여 Animated 인스턴스를 생성해야 하는데 아래와 같이 해주면 된다. const position = useRef(new Animated.Value(0)).current; 저 Animated.Value 매서드에 들어가는 전달인자는 애니메이션의 초기 값이다. 이렇게 설명하..
-
[TIL] scrollView에서 스크롤 할 때 특정 컴포넌트를 화면 상단에 고정하는 방법TIL 2021. 10. 13. 19:32
다른 앱들 보면 스크롤 하다가 상단에 컴포넌트가 고정되는 것을 볼 수 있는데 react native에서는 생각보다 쉽게 할 수 있다. 오늘 한 삽질의 역사를 뒤돌아 보면 처음에 position을 absolute로 주면 될까 해서 발악해봤는데 이건 답이 아니더라... ㅜㅠ 그러던 차에 구글링을 열심히 하던 도중 stickyHeaderIndices 라는 옵션이 있다는 것을 알게 되었다... 이 옵션은 해당 scrollview에 n번째 해당하는 컴포넌트를 스크롤하다가 상단에 고정하는 기능을 제공하는데 아래와 같이 사용하면 된다. {...chiled) 배열 안에 2, 3 과 같이 복수로 넣게 되면 2번째 3번째 요소가 고정되는 것을 볼 수 있다. 나는 2번째 요소만 고정하면 되서 2를 넣었는데 상황에 따라 효율..
-
[RN] scrollview 중첩 사용 에러TIL 2021. 10. 7. 20:07
오늘 작업하다가 아래와 같은 에러 코드를 뱉어서 심히 당황했다. 뭔고하니 RN에서는 스크롤뷰 내부에 스크롤을 할 수 없다는 것이다. virtualizedlists should never be nested inside plain scrollviews with the same orientation because it can break windowing and other functionality - use another virtualizedlist-backed container instead. 그런 고로 스크롤뷰 내부에는 스크롤뷰를 넣지 않는걸로! 참고 - https://stackoverflow.com/questions/67623952/error-virtualizedlists-should-never-be-ne..
-
[RN] native에서 position fixed 사용하기!web study/react-native 2021. 10. 5. 20:20
position fixed를 사용하고 싶은가? 아쉽지만 RN에는 fixed 옵션이 없다 ㅜㅜ 하지만 구현하는 방법은 있는데 바로 position absolute를 이용하는 방법이다. 이는 absolute가 가지고 있는 특징을 이용하여 꼼수를 쓰는 방법이라고 난 말하고 싶은데 사용해보면 생각보다 쉽게 구현할 수 있다. 먼저 absolute가 가진 속성을 이해해야 하는데 absolute는 부모 요소의 위치에 영향을 받는다 즉 부모의 위치가 고정이면 absolute를 사용하는 자식 요소의 위치도 고정이라고 할 수 있다. 자 그러면 어떻게 사용해야 할 지 알아보자 native에서 scroll은 항상 scrollview나 flatList를 사용하게 된다. 이를 사용하면 scrollview 내부에서 스크롤을 하게 ..