React-native (21) 썸네일형 리스트형 [ React Native ] 안드로이드 앱 배포하기 1. keystore 생성 처음 앱을 등록하고 이후에 업데이트 할 때 없어서는 안되는 keystore 파일입니다. /android/app 경로로 이동하고 아래 코드를 입력한다. $ keytool -genkeypair -v -keystore [keystore name] -alias [alias name] -keyalg RSA -keysize 2048 -validity 10000 keystore name : 키스토어 파일 이름 임의 지정 alias name : 앱을 키스토어 파일로 서명할 때 사용할 이름 10000 : 유효기간 ( 유효기간이 지나면 더 이상 해당 앱은 업데이트할 수 없음 ) ※ 예시 keystore name : release.keystore, alias name : key_alias 이라면 .. [ React Native ] 앱 아이콘 넣기 사용환경 Xcode 14.2 사용 iOS 1:1 비율 (정사각형) 아이콘 이미지 작업이 먼저 되어야 합니다. 사이즈별로 이미지가 필요 Xcode로 프로젝트 폴더안에 images 를 클릭해보면 위 사이즈에 맞는 이미지를 제작해야함 요새는 인터넷에 이미지 하나 올리면 자동 생성해주는 사이트가 많으니 검색해서 찾아봐도 됩니다. Android 빨간색 테두리 안에 파일들을 바꿔줘야 하는데 최근 안드로이드 폰에서 앱 아이콘이 라운드로 된것들이 많다고 하네요 저는 아이폰 유저라 잘은 모르지만 5개 폴더 안에 사이즈별로 ic_launcher_round.png ic_luancher.png 을 생성해서 넣어주면 아이콘 셋팅 완료! 아이콘 생성 방법은 밑에 웹사이트 참고하셔서 만드시면 좋을꺼 같아요 각각 사이즈 hdpi :.. [ React Native ] [ Android ] bundleRelease 실패 해결 > Task :react-native-async-storage_async-storage:generateReleaseRFile FAILED > Task :react-native-async-storage_async-storage:generateReleaseRFile FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-async-storage_async-storage:generateReleaseRFile'. > Could not resolve all files for configuration ':react-native-async-storage_async-storage:releaseCompileClasspath'. > Failed to transform react-native-0.71.0-rc.0-relea.. [ React Native ] 안드로이드 sdk 31로 수정 후 bundleRelease 에러 > Execution failed for task ':app:processReleaseMainManifest'. 에러 관련 해결 에러발생 업데이트하려고 번들을 생성하려고 하니 에러가 발생함 targetSdkVersion = 31 로 업데이트를 해야하는 상황에서 build.gradle에서 수정하고 bundleRelease를 하니 Execution failed for task ':app:processReleaseMainManifest'. 에러가 발생 문제해결 sdk 31에서는 android:exported = "true" 를 넣어줘야 빌드 성공이 되다 보니 AndroidManifest.xml 파일에서 android:exported = "true" 추가하니 해결되었습니다. 추가 위치 // AndroidManifest.xml ... ... ... [ React Native ] 앱 이름 바꾸기 앱 이름 변경은 간단합니다. Android 1. app.json 에서 displayname을 수정 2. string.xml 에서 app_name을 수정 - path : android/app/src/main/res/values/string.xml app name iOS xCode에서 General탭 > Identity > Display Name을 바꿔주면 끝! 안되면 Info.plist 에서 Bundle display name을 수정 후 재 빌드하면 적용 됩니다. [ React Native ] 업데이트 팝업 만들기, 버전관리 0. 팝업 만들기 2023.01.26 - [React-native] - [ React Native ] 재사용 가능 팝업 ( reusable popup ) 모달 만들기 [ React Native ] 재사용 가능 팝업 ( reusable popup ) 모달 만들기 0. 참고사항 - 저는 스타일드컴포넌트를 사용하다 보니 이것을 사용하지 않는다면 stylesheet로 스타일을 지정하지 않습니다. - theme 파일을 따로 만들어서 사용하다 보니 코드 그대로 사용하기 어 ican-do.tistory.com 저는 로그인 하기 전에 버젼 체크를 해서 스플레시 이미지가 띄워진 상태에서 업데이트 팝업을 띄우도록 하려고 합니다 :) 1. package.json 파일에서 버젼 가져오기 import packageJson fr.. [ React Native ] 재사용 가능 팝업 ( reusable popup ) 모달 만들기 0. 참고사항 - 저는 스타일드컴포넌트를 사용하다 보니 이것을 사용하지 않는다면 stylesheet로 스타일을 지정하지 않습니다. - theme 파일을 따로 만들어서 사용하다 보니 코드 그대로 사용하기 어렵습니다. ( fontsize, color 등 앱에서 공통된 요소들 묶어놓은 파일) - 모달이다 보니 중복으로 팝업을 뛰울수가 없습니다. 1. 모달 라이브러리 설치 npm install react-native-modal cd ios && pod install && cd ..// ios 셋팅 2. 팝업 전체코드 import React, { forwardRef, useImperativeHandle, useState, } from 'react'; import styled from 'styled-componen.. [ React Native ] Code Push 사용하기 1. AppCenter Cli 글로벌 설정으로 설치 $ npm install -g appcenter-cli yarn으로는 설치가 안된다고 함 2. AppCenter 로그인 $ appcenter login 명령어 실행 직후 appcenter 홈페이지가 열림 로그인 하게되면 키값을 복사할수 있는데 복사해서 다시 터미널로 돌아가서 입력하면 로그인이 완료됩니다. 3. AppCenter에 앱 등록하기 appcenter apps create -d {앱 이름} -o {os} -p {플랫폼 타입} 같은 프로젝트라도 OS별로 등록해야함 1) appcenter apps create -d myapp_android -o Android -p React-Native 2) appcenter apps create -d myapp_i.. 이전 1 2 3 다음