프로그래밍/React-Native <JSX>34 [React-Native/오픈소스활동] issue#35639 KeyboardAvoidingView 관련 버그 해결 일지 개요 React Native는 키보드를 사용할 수 있도록 KeyboardAvoidingView 컴포넌트를 제공. KeyboardAvoidingView가 레이아웃을 조정하는 과정에서 불필요한 추가 공간이 영구적으로 발생하는 문제. 문제 분석 문제가 되는 컴포넌트 라이브러리 파일 내 각 함수 디버깅 및 Inspector를 사용해서 문제 원인을 분석. 문제 분석 결과 _relativeKeyboardHeight 함수 관련 문제임 _onLayout 함수 내 event.nativeEvent.layout 관련 문제임 네이티브에서 가져오는 레이아웃 너비 값 event.nativeEvent.layout 에 의한 문제 event.nativeEvent.layout 값을 이해할 수 없음 네이티브에서 레이아웃 너비 값을 계산하.. 2023. 4. 7. [React-Native] 깃허브 레포지토리 첫 업로드하기 프로젝트 생성 아래 명령을 통해 로컬 프로젝트를 생성합니다. npx react-native init 프로젝트명 깃허브 레포지토리 생성 로컬 환경에서 react native 프로젝트를 생성하는 동안 깃허브에 접속하여 레포지토리를 생성해 주세요. react-native cli 로 프로젝트 생성 시 자동으로 .gitignore이 생성되므로 생성 옵션 중 .gitignore 파일 추가를 선택하지 마세요. README 파일 추가도 선택하지 마세요. 깃 초기화 로컬 프로젝트 생성이 완료되었으면 로컬 프로젝트 디렉토리에서 깃 초기화를 해주세요. git init 깃 리모트 설정 깃허브에서 생성한 레포지토리와 로컬 프로젝트를 연결합니다. git remote add origin https://github.com/그룹또는회.. 2023. 3. 14. [React-Native] Watchman std::__1::system_error: Operation not permitted 접근 권한 버그 해결하기 RN 앱을 개발할 때 필요한 도구인 watchman, 프로젝트 디렉토리 접근 권한이 부여된 상태임에도 실행 시 접근 권한이 없다고 에러를 출력하는 문제가 있습니다. 이 문제를 해결해보겠습니다. ... { watchmanResponse: { error: 'std::__1::system_error: open: /Users/taegyeonglee/Documents/GitHub/Checked: Operation not permitted', version: '2023.01.16.00' } } 이 글은 watchman설치를 완료한 상태을 전제로 합니다. 부여된 권한 삭제 설정 -> 개인정보 보호 및 보안 -> 파일 및 폴더 에서 watchman을 모두 삭제해 줍니다. Watchman shutdown 실행 중인 wa.. 2023. 3. 5. [React-Native] Pressable 컴포넌트로 재사용 가능한 버튼 구성하기 Presssable 컴포넌트는 RN 앱 개발을 위해 반드시 알아야 하는 컴포넌트입니다. press 상호작용에 관한 기능을 제공하는 컴포넌트이기 때문에 적절히 커스텀해서 버튼 등의 기능을 대신할 수 있습니다. (RN 기본 컴포넌트 Button 컴포넌트는 너무 빈약합니다.) 구성 그러나 Pressable을 재사용 가능한 버튼으로 바로 사용하기에는 난감한 문제들이 있습니다. 버튼 뿐만 아니라 기타 press event에도 대응하기 위해(버튼 그 이상의 목적으로 광범위한 용도를 위해) 만들어졌기 때문입니다. import React from "react"; import { Pressable, Text } from "react-native"; const ButtonCustom = ({ onPress, text, t.. 2023. 2. 12. [React-Native] react-native-webview 안드로이드 플랫폼에서 웹뷰를 출력하지 않는 문제 앱 내 웹뷰를 이식하려고 했습니다. 웹뷰를 사용하기 위해 react-native-webview 라이브러리를 사용하려 했으나.. 안드로이드 플랫폼에서 정상적으로 출력이 되지 않았습니다. 빈 공간만 출력되었습니다. IOS 플랫폼에선 정상적으로 원하는 웹뷰가 출력되었습니다. 안드로이드 플랫폼에서만 발생하는 문제였습니다. 깃허브 issue 항목에 비슷한 문제에 대한 해결 방법을 찾을 수 있었습니다. 상위 컴포넌트 없이 리턴 View 나 ScrollView 같은 상위 컴포넌트가 존재할 때 리턴하는 경우 발생하는 문제였습니다. 잘못된 예) return ( ); 올바른 예) return ; 참고 : react-native-webview/issues/1426#issuecomment-1207378759 White bla.. 2023. 2. 12. [React-Native] react-native-google-singin 앱 심사에 통과하기 위한 앱 서명 인증서(SHA-1) 키 적용하기 debug 빌드에서 잘 기능하는 구글 소셜 로그인이 동작하지 않아 플레이 스토어 심사에서 승인받지 못했습니다. 찾아보니 앱 서명 인증서 SHA-1 키를 파이어베이스 콘솔에 추가해야 한다고 합니다. (디버그 환경에서는 상관이 없으니) 귀찮다고 추가 안했던 기억이 나네요... SHA-1 키 복사 구글 플레이 콘솔 -> 앱 선택 -> 설정 -> 앱 무결성 -> 앱 서명에서 앱 서명 인증서(SHA-1) 지문을 복사합니다. 파이어베이스 콘솔 적용 파이어베이스 콘솔 -> 프로젝트 선택 -> 프로젝트 설정 -> 디지털 지문 추가를 클릭합니다. 복사한 SHA-1 키를 붙여넣은 후 저장합니다. (선택) Release 빌드 SHA-1키 콘솔에 적용하기 구글 로그인이 Release 빌드에서도 정상적으로 기능하도록 Relea.. 2023. 2. 12. 이전 1 2 3 4 5 6 다음
