본문 바로가기

반응형

react-native

(3)
[react-native] SafeAreaView의 높이를 어케 구할까?(ios) 아이폰 x 이후 모델은 디스플레이 상단에 노치가 있다 개발을 하는데 있어서 노치를 신경 안쓰다가 자칫 잘못하면 기껏 만들어 놓은 ui가 가려 질 수있다 왜냐하면 기본적인 height는 노치와 하단 home indicator를 포함한 높이기 때문에 사용 범위 보다 크게잡히기 때문이다 그래서 SafeAreaView를 사용하게 되는데 나같은 경우 컨테이너의 크기가 자꾸 safearea보다 작아지길래 강제로 높이 설정을 해주었다 내 실력탓이다 그치만 잘 해결됐다 알아보자 먼저 스크린의 크기를 구해 보자 Dimension을 import import { Dimensions, } from 'react-native'; 스크린의 높이와 너비를 알 수 있다 let ScreenWidth = Dimensions.get('wi..
[react-native] 키보드를 띄우면 input창을 가리지 않게 해보자 (KeyboardAwareScrollView) 회원가입창을 만드는데 페이지가 길어서 키보드를 누르면 화면을 가리게 된다 해결 해보자 앱은 성가시다 다음과 같이 맹글었다 키보드를 올리게 되면 다음과 같이 덮어 진다 . 겹치지 않으며 현재 선택 한 input창에 포커싱이 되게 해보자 먼저 react-native-keyboard-aware-scroll-view 모듈을 받아주자 npm i react-native-keyboard-aware-scroll-view --save github.com/APSL/react-native-keyboard-aware-scroll-view import 문 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' 본문 내용을 Keyboard..
[react-native] 버튼을 누르면 alert 창을 띄워보자(ios) 기존 하던 프로젝트를 이제 앱으로 만들기로 했다 react-native 처음 만져봤다 react와 똑같이 class형과 functional형이 있는데 난 class형을 사용했다 버튼을 누른 후 alert창이 뜨게 하고 싶다 우선 버튼을 만들자 (react와 비슷한점이 많다) //title : 표시 될 문자 //onPress가 버튼을 눌렀을 때의 이벤트이다 react와 조끔 다르니까 주의하자 아이폰스러운 버튼이다 RN(react-native)에서 제공해주는 api 를 사용해보자 import { View, StyleSheet, Button, Alert } from "react-native"; Alert api를 가져온다 onPress 이벤트 발생 시 실행되는 함수를 만들자 goAlert = () => Ale..

반응형