본문 바로가기
반응형

개발로그93

ios splash 화면 만들기 (react-native-splash-screen 이용) 검색해보니 여러가지 방법이 있는 것 같았으나, 아래 방법으로 먼저 적용해보기로 했다. react-native-splash-screen // yarn의 경우 yarn add react-native-splash-screen // npm의 경우 npm install react-native-splash-screen // ios의 경우 cd ios && pod update // pod update 해줘도 되고 pod install 해줘도 됨 또는 npx pod-install ios Android android : MainActivity.java 파일 수정 ... import android.os.Bundle; // 추가 import com.facebook.react.ReactActivity; import org.d.. 2023. 2. 8.
아이폰 디바이스별 해상도 정리 실제 해상도 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.
반응형

티스토리툴바