본문 바로가기
반응형

전체 글280

아이폰 디바이스별 해상도 정리 실제 해상도 iPhone 3gs 3.5인치 320 x 480 320 x 480 iPhone 4, 4s 3.5인치 640 x 960 320 x 480 iPhone 5, 5c, 5s, SE1 4인치 640 x 1136 320 x 568 iPhone 6, 6s, 7, 8, SE2, SE3 4.7인치 750 x 1334 375 x 667 iPhone 12 mini, 13 mini 5.4인치 1080 x 2340 375 x 812 iPhone 6+, 6s+, 7+, 8+ 5.5인치 1242 x 2208 414 x 736 iPhone X, XS, 11 Pro 5.8인치 1125 x 2436 375 x 812 iPhone Xr, 11 6.1인치 828 x 1792 414 x 896 iPhone 12, 12 Pro, .. 2023. 2. 8.
시뮬레이터를 지정해서 테스트 하는 방법 --simulator flag CRNA로 생성된 프로젝트에서 혹은 npx로 시뮬레이터를 실행할 수 있다면 아래와 같이 --simulator 플래그로 실행시 지정할 수 있다. 아래 예시는 아이폰 se2 (아이폰 2세대)를 시뮬레이터로 지정해서 실행하겠다는 뜻이다. npx react-native run-ios --simulator="iPhone SE (2nd generation)" 마찬가지로 package.json에 저장해서 사용할 수 있다. #package.jsno에 추가 "scripts" : { "launch-ios": "react-native run-ios --simulator \"iPad Air 2\"" } #실행시 npm run launch-ios 사용가능한 디바이스 리스트 보기 iPad Air 2.. 2023. 2. 8.
2023. ver2. admob IOS 앱 첫 연동하기 예제 CRNA app (Expo Dev Client and EAS CLI) 2023.02.06 - [개발로그/ReactNative] - 2023. Ver1 . admob 첫 연동하기 정리 CRNA app (with IOS) 구글 애드몹에 가입하고 앱을 생성하는 단계까지는 위 포스팅의 내용과 동일합니다. 유투브에 다른 방법으로 연동하는 것이 있어서 테스트해보았습니다. Setup/Installation - Expo Dev Client and EAS CLI - Setup cd expo-rn-demo-with-ads expo install expo-dev-client expo install react-native-google-mobile-ads npx pod-install ios Add to app.json ios_app_id 는 자신이 발급 받은 것으로 해야합니다. 구글애드몹 사이트.. 2023. 2. 6.
에러가 있는 코드로부터 배운다. React Native Animated 에서의 Value 수정하기(useRef) export default function App() { const [up, setUp] = useState(false); // state 가 변경되어 컴포넌트가 re-rendering이 될 때마다 모든 코드가 다시 실행된다. // 그래서 21번째 라인이 실행되며 다시 초기값인 Y=0이 된다. const Y = new Animated.Value(0); const toggleUp = () => setUp((prev) => !prev); const moveUp = () => { Animated.timing(Y, { toValue: up ? 200 : -200, useNativeDriver: true, easing: Easing.circle, }).start(toggleUp); }; Y.addListener(.. 2023. 2. 1.
React Native Animated - 애니메이션 value 를 수정하기 위해 사용하는 것들. 예제 포함 이전글 2023.01.31 - [개발로그/ReactNative] - react native Animated 를 사용할때 알아야할 절대 Rules! ReactNative Animatied 제공받을 수 있는 3가지 애니메이션 Animated.decay() # 초기 설정된 속도로 시작해서 점점 느려지고 멈춘다. Animated.spring() # 물리모델을 지원한다. Animated.timing() # 대부분의 경우 타이밍을 사용한다. Animatied.timing() import React from "react"; import { Animated, StyleSheet, TouchableOpacity } from "react-native"; const Container = styled.View``; const.. 2023. 1. 31.
react native Animated 를 사용할때 알아야할 절대 Rules! 01. 변수가 필요하다면, Animated에서 생성해서 사용한다. state로 변수를 생성하면 모든 컴포넌트가 re-rendering(다시 그리기) 돼버린다. 그러므로 Animated에서 무조건 생성한다. #초기값이 0인 변수 Y를 생성한다. const Y = new Animated.Value(0); 02. 변수에 값을 변경한다면 절대 절대 절대 절대 이렇게 하지 않는다. # 변수값을 직접 변경하지 않는다. Y = 20 03. Animated 될 수 있는 것에만 Animated 를 시도한다. ㅋㅋ createAnimatedComponent()를 사용해서 Animatable component로 변경한 뒤에 사용한다. # 이렇게 하지 않는다. 2023. 1. 31.
처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋 환경 Mac OS 13.2 Xcode 14.2 React Native v0.70.5 ( v0.71.3 is currently newer) node 16.0.0 expo ~47.0.12 프로젝트 생성 dear-diary 라는 이름의 프로젝트 생성 --use-npm : npm 을 이용하여 의존성설치를 하겠다. npx create-react-native-app dear-diary --use-npm Default new app (선택) cd dear-diary expo splashscreen 을 기본 템플릿에 포함하기를 원한다면, npx create-react-native-app -t with-splash-screen # 단, with-splash-screen 템플릿을 선택한다면 ios/android 폴더가 생.. 2023. 1. 31.
처음부터 해보는 npx react-native init AwesomeProject with ios 세팅! 나만의 프리셋 많은? 연습용 프로젝트를 생성해서 만들어도 맥에서 개발하는데도..안드로이드 시뮬레이터만 돌아간다. OTL. 이번에야 말로 IOS 시뮬을 켜보리라.. 해서 다시 정리하며 한땀한땀 고쳐보리라. 기본뼈대는 reactnative.dev 의 Setting up the development environment 를 토대로 하였으며, 각각의 버전확인 및 버전 변경방법 등도 다 적어둘 것이다. 두번다시 같은 삽질은 안할테다. 1. Development OS Mac OS 13.2 2. 설치해야하는 것들 각각의 버전은 현재 내가 설치한 버전이고 의존성이 있어서 어느 Node 18버전을 설치한 사용자라면 나머지 버전을 똑같이 한다해도 에러가 나게 된다. 즉. 노드버전 16.x 를 비롯해 다른 것들도 모두 버전을 맞추는 것이.. 2023. 1. 30.
반응형

티스토리툴바