ReactNative(9)
-
React Native 어플 출시했다다다
https://play.google.com/store/apps/details?id=io.jjalang.chagok 짤랑차곡 - 통장은 모르는 나만의 절약 내역 - Google Play 앱 퇴근길에 맡은 빵 냄새를 참아 3,000원을 절약한 경험이 있나요? 통장은 모르는 나만의 절약 내역을 짤랑차곡에 기록하세요. play.google.com 드디어 어플이 나왔다... 사실 일주일 전에 출시가 되었는데 출시된 것도 못 알아봤다.. 뒤늦게 깨닫고 구글 플레이 스토어에 검색해봤는데 나와서 너무 뿌듯했다 아직 잔버그가 있지만.. 외면하고 냈다 다운로드수가 어느 정도 차면 업데이트해야지 안 그러면 그냥.. 이대로 끝나는거여.. 사람들이 개구리를 좋아해줘서 뿌듯하다 아직 안드로이드 앱만 출시해봤기 때문에 안드로이드 ..
2021.07.25 -
React Native 시간에 따라 배경화면(테마) 바꾸기
밤에는 밤 배경화면을, 낮에는 낮 배경화면으로 설정하는 방법 render의 ImageBackground를 다음과 같이 설정하면 새로고침 하는 시각을 기준으로 배경화면이 바뀐다 Date.getHours()를 이용해 현재 시각을 받고, 대소관계 비교를 위해 이를 Int로 바꿔준다. // 오전 5시 ~ 오후 8시 59분까지는 day.png, 그 외의 시간에는 night.png를 배경화면으로 설정 = 5 && parseInt(new Date().getHours())
2021.07.04 -
React Native 여러 이미지들을 약간씩만 겹쳐서 쌓기
overlap, overlay, images, stack ... 등 여러 키워드로 오랜 시간 구글링하다가 포기하길 반복하다가 드디어 해결했다~~~ overlap images로 검색하면 다 1-2개 이미지만 겹치는 방법이 나와 있어서 적용하기 어려웠다 나는 user input에 따라 길이가 달라지는 이미지들의 리스트를 보여주는데, 이 이미지들을 조금씩 겹치게 하는 것이 목적이었다 나는 아래서부터 위로 하나씩 component를 쌓는 코드를 짜서 reversed_index라는 새로운 변수를 만들어 줘야 했다. 위부터 0, 1, 2 index를 갖는데 이를 아래부터 0, 1, 2 로 바꿔준 index를 reversed_index라는 변수에 저장하고 이 reversed_index가 0이면 (=맨 아래 compo..
2021.07.03 -
React Native Modal 바깥 부분 터치해서 닫기
이걸 하고 싶어서 엄청 많은 글을 찾아다녔는데 다 작동이 잘 안 됐다 근데 다른 걸 찾다가 이걸 우연히 발견 설마 이게 그건가??하다가 성공했다.. 뭐지 뒤늦게 업데이트된 기능인가?! 쨌든 Modal에 onBackdropPress 옵션을 주면 가능하다... 그 옵션에 아무 함수나 전달하면 Modal 바깥 부분을 눌렀을 때 그 함수가 실행된다 나는 그냥 Modal을 닫도록 했다~~ this.closeModal()}>
2021.07.03 -
React Native 화면 크기별로 폰트 사이즈 변경하기
우선 여기저기 요긴하게 쓰이는 화면 크기 알아내는 법 import { Dimensions } from 'react-native'; //화면의 높이 Dimensions.get('window').height //화면의 너비 Dimensions.get('window').width 화면 크기에 따른 폰트 사이즈 변경하기 const styles = StyleSheet.create({ ... sectionSubtitle: { // 화면 너비가 500보다 크면 22, 아니면 18 fontSize: Dimensions.get('window').width > 500? 22 : 18, textAlign: 'center', fontFamily: 'Bazzi', }, ... 비율대로 크기를 조정하려면 화면 너비를 24로 나눈..
2021.06.25 -
React Native 어플 안에서 소리 재생하기
만들고 있는 어플 안에 개구리 그림이 있는데 기능이랑 상관없이 그냥 개구리를 누르면 개구리 소리가 나면 좋겠다고 생각했다 귀여우니까~ 그래서 주기능과 아무 상관없지만 소리 재생하는 삽질을 시작했다 ... 1. 재생하고 싶은 파일을 다운로드한다 난 mp3 파일이었는데 어느 확장자들이 가능한지는 모르겠다 폰트와 비슷하게 assets 폴더 안에 넣어줬다 2. 어플 디렉토리로 이동해서 npm i expo-av 라이브러리 설치해주기 3. App.js에 다음과 같이 코드 추가해주기 import { Audio } from 'expo-av'; export default class extends React.Component { ... async playSound() { const sound = new Audio.Soun..
2021.06.25