우선 여기저기 요긴하게 쓰이는 화면 크기 알아내는 법 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로 나눈..

만들고 있는 어플 안에 개구리 그림이 있는데 기능이랑 상관없이 그냥 개구리를 누르면 개구리 소리가 나면 좋겠다고 생각했다 귀여우니까~ 그래서 주기능과 아무 상관없지만 소리 재생하는 삽질을 시작했다 ... 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..

결론부터 말하자면 Text의 style에 width를 설정하면 된다 이런 식으로 Text의 style 안에도 width를 적용할 수 있는지 몰라서 여러 container의 너비를 제한했는데 너비가 제한되긴 했는데 이상하게 가운데 정렬이 깨졌다 .. 그 전엔 가운데 정렬 잘 했는데 아직도 왜 그런진 모르겠지만 일단 문제는 해결~~

아직 PlayStore에 업로드 하지 않은 어플도 광고 ID는 받을 수 있다 근데 안드랑 IOS 어플을 따로따로 두 번 만들어줘야 한다 배너 광고를 띄우면 어플이 못생겨지는 느낌이라 어플 열 때 한 번만 전면 광고가 나오도록 설정했다 1. 구글 AdMob 가입 https://admob.google.com/intl/ko/home/ Google AdMob: 모바일 앱 수익 창출 인앱 광고를 사용하여 모바일 앱에서 더 많은 수익을 창출하고, 사용이 간편한 도구를 통해 유용한 분석 정보를 얻고 앱을 성장시켜 보세요. admob.google.com 이것 저것 선택하고 (대부분 디폴트 값으로) 통화는 고민하다가 원화로 하면 수수료가 더 나간다길래 달러로 받기로 했다 2. 광고 단위 선택하기 난 앞서 말한 이유로 전..

폰트 바꾸는 건 많이 헤맸다.. 정리하면 1. ttf 또는 otf 폰트 파일을 다운 받는다 2. assets 아래 fonts 폴더를 만들고 그 안에 폰트 파일을 넣는다 3. root 위치에 react-native.config.js 파일을 만들고 그 파일에 다음과 같이 쓴다 module.exports = { project: { ios: {}, android: {}, // grouped into "project" }, assets: ["./assets/fonts/"], // stays the same }; 4. 터미널에서 npx react-native link 를 실행한다. 대충 폰트 파일을 어플이 받아갈 수 있게 이어준다는 의미인듯 여기까지만 하고! fontFamily에 다운 받은 폰트 이름 쓰고 왜 안 ..

2년 전부터 만들고 싶은 어플을 다시 용기내어 만들어보기로 했다. 아무것도 모르는데 그냥 일단 해보기로 ... 사람 일은 모르는 거니까 일단 안드로이드와 iOS 모두 한 번에 만들 수 있는 React Native를 이용해서 만들기로 했다. 그냥 쉽게 쉽게 웹앱을 만들까 생각해봤는데 내가 만들고 싶은 건 굳이 웹페이지가 있을 필요가 없어서 그냥..한번 할 때 제대로 하자...는 생각으로 .. 근데 죄다 웹앱 만드는 글만 있고 그냥 앱 만드는 글이 많이 없어서 문제 해결에 애를 먹었다. nomadcoders.co/react-native-fundamentals React Native로 날씨앱 만들기 - 노마드 코더 Nomad Coders React Native Fundamentals nomadcoders.co..