react-native 공부 (9) 썸네일형 리스트형 [reactnative]키보드 켜졌을 때 꺼졌을 때, 높이를 어케알까(keyboard event,show,hide,height) 디자인 수정 중에 채팅하는 페이지에서 input창을 누르면 키보드가 input창을 가려버렸다 즉 키보드가 올라와서 input창이 안보인다 ios에서만 이런현상이 보였는데 내가 짠게 아니라서 걍 강제로 키보드가 올라왔을 때 -> 인풋창에 margin-bottom 을 줘서 올려버렸다 키보드가 올라왔을 때와 내려갔을 때의 이벤트를 받아야한다 먼저 import import { Keyboard } from 'react-native'; 라이브러리 기본 제공이다 이벤트 리스너 이다 componentDidMount () { this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow); //키보드가 show 했을 .. xcode에서 app 아이콘/사진 설정해보자(icon) 어플 아이콘은 어플의 얼굴이다 안드로이드 플레이스토어는 대충 뚝뚝딱딲 넣으면 제출이 되는데 appstore는 꽤 까다롭다 알아보자, 먼저 사진이 필요하다 성우한테 받았다 웬만하면 최대 사이즈 1024*1024가 좋다고 한다 여튼 정사각형이면 된다 아래 링크에 들어가면 os별 크기별 사진으로 변환하여 zip파일을 만들어 준다 https://appiconmaker.co/Home/Index/af87b3a3-0a70-4a21-b0aa-a40fa0c5f609 파일 드래그하면 다음과같이 변환된다, 집파일을 받아 주자 xcode 실행 대충 한눈에 보는 경로: 프로젝트폴더 -> images.xcassets -> AppIcon 클릭 그리고 각각 크기에 맞게 드래그해서 퍼즐놀이 하면 된다 팁이있자면 어떤싸이즈를 넣어야할지.. [reactnative]안드로이드와 ios구분(platform.OS ,version) 페이스북에서 개발한 react.js와 유사한 모바일용 react-native ios와 android 동시개발 가능한 하이브리드이기 때문에 코드 상으로 os에 따라 구분할 필요가 있다 먼저 import import { Platform } from 'react-native' react-native라이브러리 기본 제공한다 static Platform.OS 'ios' 와 'android' 스트링값을 반환한다 나 같은경우는 구글 애드몹(adMob)광고를 불러 올 때 필요한 unitId가 os에 따라 다르기 때문에 구분해 주어야 했다 const unitId = Platform.OS === 'ios' ? 'ca-app-pub-5434797501405557/2267266613' //ios unitId : 'ca-app.. [reactnative] 로컬저장소 asyncstorage를 사용해보자 맨날 state나 서버에 박을 순없다 앱이 실행되는 동안 또는 앱이 꺼져도 가지고 이써야하는 정보들이 있다 react native의 로컬 저장소를 사용해 보자 모듈 다운로드 www.npmjs.com/package/@react-native-community/async-storage npm i @react-native-community/async-storage import import AsyncStorage from '@react-native-community/async-storage'; 예를들어 유저 아이디를 저장하고 출력하기 setItem : 저장 getItem : 출력 출력의 결과값은 result에 저장된다 AsyncStorage.setItem('user_id','hwije123', () => { //.. [react-native]이미지(image)파일 적용 어케 할까? 간단한건데 맨날 헷갈려서 적어둔다. 먼저 이미지 파일을 구한다. 사용할 plus.png와 llama.png이다 귀엽다 적용할 파일이 있는 폴더에 넣어줬다 원하는 곳에 넣어도 된다 경로만 설정 잘 해주면 된다. 변수에 경로를 저장하고 사용하는 방법과 태그에 직접 적어서 사용하는 방법 쓸거다 라마(llama.png)부터 넣어보자 코드 상단에 import친구들 많은곳에 적어줬다. let imagePath = require('./llama.png'); //imagePath변수에 llama경로가 저장된다 밑에 image태그에 source속성 초기화 이미지에 height와 width를 안적어주면 표시되지 않으니 주의하자!! 다음과 같이 나온다 메세지 내용은 팀원이 적었다. 난 style만 작업중이다 다음은 plus.. [reactnative] 스크린(screen)의 높이(height)와 너비(width)를 어케알까?(Dimensions) css를 만지다 보면 최대 너비로 하고싶을때 이상하게 width:100%가 안될때가 있다 난 초보라 왜그런지모른다 이럴땐 width를 screen 너비로 해주면 참 좋은데 알아보자 reactnative의 기본 api이다 import해주자 import {Dimensions} from 'react-native'; 상단에 아무때나 변수를 초기화 해주자 Dimensions.get('window'). 를 이용하면 된다. const Width = Dimensions.get('window').width; //스크린 너비 초기화 const Height = Dimensions.get('window').height; //스크린 높이 초기화 예시: 예를들어 이런 버튼이 있다 양쪽으로 꽉 차게 하고싶다. [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.. 이전 1 2 다음
