728x90 반응형 React-native3 KeyboardAvoidingView 관련 troubleshooting 문제 상황 android와 IOS는 같은 속성이라도 다르게 적용되는 값들이 존재한다. 대표적 예시가 keyboard와 관련된 순간! position absolute의 bottom 0인 element의 경우 android에서는 키보드가 올라올 경우 자동적으로 키보드를 제외한 화면 높이를 100%로 계산하지만(adjustResize), IOS는 키보드가 올라오더라도 전체 높이가 조절되지 않는다. 이러한 상황을 해결하기 위해 React Native에서 제공하는 기본 컴포넌트가 → KeyboardAvoidingView 되시겠다. ... 현 앱에서도 KeyboardAvoidingView를 사용해 input이 있는 페이지의 UI를 구성해주고 있었다. 그런데 문제..! bottom 0에 위치하는 absolute한 버.. 2023. 8. 16. react-native-webview ↔ web 데이터 송수신 웹으로 구현한 채팅방 페이지를 앱 내부에 띄워주는 상황. import WebView from "react-native-webview"; RN에서 기본적으로 제공하는 WebView 컴포넌트를 통해 앱 내부에서도 WEB_URL에 해당하는 웹페이지를 띄울 수 있다. 여기서 문제. 서비스 대상자인 미용사와 보호자 모두 동일한 WEB_URL로 채팅방에 접속한다는 사실! 따라서 현 사용자가 미용사인지, 보호자인지 구분하는 flag가 필요했다. → 현 도매인 상황을 고려했을 때 앱에서 해당 URL에 접근했을 경우, 이를 미용사로 판단해야했다. 그렇다면... 어떻게 앱에서 WEB_URL에 해당하는 웹페이지에 특정 데이터를 전달할 수 있을까? https://github.com/react-native-webview/rea.. 2023. 8. 16. React Native TextInput input이 굉장히 굉장히 많은 페이지 작업을 진행 중인 관계로... 공식 문서의 TextInput를 보며 유용한 기능들을 정리해보자! Props onChange TextInput의 text가 변경될 때 호출되는 콜백 함수. ( { nativeEvent: { eventCount, target, text} }) => void onChangeText onChange와 마찬가지로, TextInput의 text가 변경될 때 호출되는 콜백 함수. onChange와의 차이점은? console.log(text)} /> // 입력한 text 콜백 함수의 argument로 → 입력한 단일 string이 넘어간다! autoFocus default는 false. true시 componentDidMount or useEffe.. 2023. 8. 16. 이전 1 다음 728x90 반응형
