React Native의 iOS 실행 화면
저는 리액트 네이티브 앱으로 작업 중이고 맞춤형 실행 화면을 설정하려고 하지만 설정할 수 없습니다.
기본적으로 React Native는 LaunchScreen.xib를 생성하므로 이미지 내부에 LaunchImage를 생성했습니다.xcassets:
또한 옵션의 "앱 아이콘 및 이미지 실행"에서 "시작 화면 파일"을 수정해야 한다는 내용도 읽었습니다.
이 작업을 수행하면 실행 화면이 완전히 검은색이 되고 앱이 로드되면 상단과 하단의 검은색 프레임이 모두 표시됩니다.
React Native 프로젝트에서 시작 화면을 설정하려면 어떻게 해야 합니까?
저는 이 스레드의 도움으로 문제를 해결할 수 있었습니다: Launch Image가 iOS 애플리케이션에 표시되지 않습니다(이미지 사용).xcassets)
그래서 다른 사람에게 도움이 될 경우를 대비해서 자세히 설명하겠습니다.
먼저 특정 이미지를 생성해야 합니다.이 템플릿과 자동 생성기가 있는 웹 페이지를 사용했습니다.TiCons
이미지를 다운로드할 때 자산/아이폰 폴더 안에 있는 이미지만 가져갔습니다.
- Default@2x.pn g (1500x960)
- Default-568h@2x.pn g (1500x1136)
- Default-667h@2x.pn g(750x1334)
- Default-Portrait-736h@3x.pn g (1242x2208)
- Default-Landscape-736h@3x.pn g(2208x1242)
또한 같은 폴더에 있는 Contents.json 파일이 필요합니다. 친구로부터 받았습니다.
{
"images": [
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "Default-568h@2x.png",
"minimum-system-version": "7.0",
"orientation": "portrait",
"scale": "2x",
"subtype": "retina4"
},
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "Default-667h@2x.png",
"minimum-system-version": "8.0",
"orientation": "portrait",
"scale": "2x",
"subtype": "667h"
},
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "Default-Landscape-736h@3x.png",
"minimum-system-version": "8.0",
"orientation": "landscape",
"scale": "3x",
"subtype": "736h"
},
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "Default-Portrait-736h@3x.png",
"minimum-system-version": "8.0",
"orientation": "portrait",
"scale": "3x",
"subtype": "736h"
},
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "Default@2x.png",
"minimum-system-version": "7.0",
"orientation": "portrait",
"scale": "2x"
}
],
"info": {
"version": 1,
"author": "xcode"
}
}
그래서 이 시점에서 이미지 내부에 LaunchImage.launchimage라는 폴더를 만들었습니다.내 React Native 프로젝트의 xcassets 폴더에서 이미지와 Contents.json 파일을 저장합니다.
둘째로, 당신은 당신의 프로젝트를 Xcode로 열어야 하고, "앱 아이콘과 이미지 실행" 아래의 "화면 파일 실행" 옵션은 비워 두어야 합니다. (또한 우리는 우리의 프로젝트 내에서 LaunchScreen.xib 파일을 삭제할 수 있습니다) 그 후에 "자산 카탈로그 사용"을 클릭합니다.모달이 열리면 카탈로그 이미지 마이그레이션을 선택합니다.
이제 "Launch Images Source" 선택기에서 이전에 만든 Launch Image(이미지가 있는 폴더)를 선택할 수 있습니다.
브랜드 자산 대신 이 항목을 선택하면 브랜드 자산 폴더를 삭제할 수 있습니다.
이 시점에서 맞춤형 출시 이미지로 React Native 애플리케이션을 실행할 수 있습니다.
쉬운 일로 생각하기에는 좀 복잡해 보이지만, 많은 책을 읽고 나서 이것이 제가 스플래시 이미지를 작동시킬 수 있는 유일한 방법이었습니다. 그래서 저는 커뮤니티와 공유하고 싶었습니다.
시뮬레이터에서 앱을 삭제해야 합니다.그런 다음 프로젝트를 청소하십시오.
갱신하다
generator-rn-toolbox사용되지 않습니다.대신 react-native-make를 사용합니다.
오래된 대답
나는 on react-native를 사용하여 시작 화면이나 메인 아이콘을 적용하기 위해 generator-rn-toolbox를 추천합니다.이것은 clia react-native를 통해 더 간단하고 사용하기 쉽습니다.
- XCode를 열 필요가 없습니다.
- 다양한 해상도를 위해 많은 이미지 파일을 만들 필요가 없습니다.
- 언제든지 한 줄의 추천서를 사용하여 시작 화면을 변경합니다.
요구 사항들
- 노드 >= 6
- 실행 화면(플래시 화면)을 위한 2208x2208px 해상도 이상의 정사각형 이미지 또는 psd 파일 하나
- 긍정적인 마음 ;)
설치하다
- generator-rn-toolbox 및 yo 설치
npm install -g yo generator-rn-toolbox- 매직 설치하기
brew install imagemagick iOS에서 부팅 화면 적용
yo rn-toolbox:assets --splash YOURIMAGE.png --ios또는 Android
yo rn-toolbox:assets --splash YOURIMAGE.png --android
이상입니다. :)
저는 SO에서 새로운 시작 화면을 만드는 방법에 대한 솔루션이 포함된 답변을 많이 보고 있습니다.제 말은, 잠시 생각해 봅시다.
새로운 반응 네이티브 프로젝트를 생성할 때 시작 화면에는 무엇이 표시됩니까?
> Facebook 기본 실행 화면
그래서 저는 이렇게 생각했습니다. 어떻게 했을까요?
그들은 다음을 만들었습니다.
LaunchScreen.xib
여기에는 분명 이유가 있을 거라고 생각합니다.그래서 저는 안으로 들어갔습니다.LaunchScreen.xib"Ract Native...""를 변경했습니다. 앱을 한 번더해서 실행 에 제 된 것을 했습니다.앱을 한 번 더 실행하여 실행 화면에 내 편집 내용이 반영된 것을 확인했습니다.
솔루션 1 기존 LaunchScreen.xib 편집
솔루션 2 내 것 만들기
그래서 저는 이 답을 타이핑하는 데 저만의 답을 만드는 법을 배우는 것보다 더 오랜 시간이 걸렸습니다.Both of these solutions are compatible with all the devices.
1단계:
제LaunchScreen.xib
2단계:
을 클릭합니다.images.xcassets 클릭 색흰공에서오른클릭클릭쪽간릭클▁right릭클▁in▁click▁click쪽.**import**추가할 이미지를 선택합니다.
3단계:
오른쪽 버튼으로 합니다.Launch Screen원하는 이름을 대봐요
4단계
왼쪽 탐색에서 프로젝트를 클릭하고 다음으로 이동합니다.Settings>General 하이 아래.App Icons and Launch Images ㅠㅠLaunch Image Source이고 비있고 다음은어Launch Screen File새로 만든 시작 화면과 이름이 같습니다.
5단계
에서작성새클릭다니에서 작성한 새 합니다.step 2 Image View원하는 대로 편집할 수도 있습니다.
그럼 됐어요, 끝났어요.솔루션을 청소할 필요도 없고, 재구축만 하면 됩니다.
이 일을 겪어서 아주 효과가 있어요.제가 발견한 유일한 장애물은 시뮬레이터 내용을 지우는 것이 아니었습니다.새 시작 화면이 작동하지 않는 경우 시뮬레이션을 열고 다음으로 이동해야 합니다.
시뮬레이터 > 콘텐츠 및 설정 재설정
시뮬레이터 내에서 하드코어 캐싱이 진행 중임에 틀림없지만, 일단 그것이 완료되면 다시 실행하면 앱을 볼 수 있습니다.xcode 시뮬레이터와 반응 네이티브 시뮬레이터 모두에 대해 이 작업을 수행해야 합니다!
'Launch Screen File' 선택 항목이 비어 있는지 확인합니다.
내 React Native 응용 프로그램에 시작 화면을 추가하려는 경우.과정을 따르면 결과는 모두 귀하의 것입니다.
단계:1 먼저 splashImageResource 폴더를 만들고 splashImage와 함께 launchScreen.xib 파일을 추가했습니다.
단계:2 이 코드를 사용하여 하위 뷰 태그에 기록된 대로 코드를 변경합니다.<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>
단계:3 당신은 당신의 앱을 Xcode로 열어야 합니다.다음은 수행할 단계입니다.
프로젝트 폴더로 이동
ios 폴더 열기
확장자가 .xcodeproj인 파일로 이동합니다. 제 경우는 splasScreenTutorial입니다.xcodeproj
Xcode에서 이 파일을 엽니다.
launchScreen.xib 파일을 삭제합니다.
splashScreen 자습서 폴더를 클릭한 다음 TARGETS 섹션으로 이동합니다.
Xcode의 왼쪽 상단 모서리에 있는 General(일반) 탭을 클릭하고 App 아이콘 및 Launch Images(이미지 실행)까지 스크롤 다운합니다.
이미지 소스 시작으로 이동하고 자산 카탈로그 사용을 클릭합니다.마이그레이션을 클릭합니다.
LaunchScreen 파일에서 LaunchScreen 텍스트를 제거합니다.
프로젝트 폴더로 돌아가서 이미지를 엽니다.xcassets 파일입니다.AppIcon과 LaunchImage가 표시됩니다.
그런 다음 이미지 실행을 클릭하고 마지막으로 크기가 다른 시작 화면 이미지를 이미지 실행 상자로 끕니다.
테스트 스플래시 화면 a) 변경 사항을 보려면 앱을 처음 실행한 경우 시뮬레이터에서 앱을 삭제해야 합니다.
앱을 삭제하려면 시뮬레이터 바의 하드웨어 메뉴를 클릭하고 홈으로 이동합니다.
삭제할 특정 앱 아이콘을 길게 누르고 아이콘의 X 기호를 클릭합니다.
react-native run-ios를 사용하여 앱을 다시 실행
React의 도움을 받아 LaunchScreen을 만든 경우 iOS Xcode의 LaunchScreen.xib 파일에 스크린샷을 촬영하여 이미지에 추가할 수 있는 동일한 내용을 추가해야 합니다.x카세트
LaunchScreen을 연 다음 Xcode의 오른쪽 패널에서 View from Object Library에 UIImageView를 추가합니다.
뷰에 후행, 선행, 하단 및 상단 구속조건을 추가합니다.아래와 같이 -
UIImageView 컨텐츠 모드를 AspectFit로 변경하여 앱이 실행될 때 동일하게 보이도록 하는 것을 잊지 마십시오.
그 후에 당신은 흰색 화면이 나오지 않도록 앱 대리인단에 코드를 추가해야 합니다.코드는 -입니다.
UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
launchScreenView.frame = self.window.bounds;
rootView.loadingView = launchScreenView;
참조할 수 있습니다 - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip
나를 위하여XCode 10.1그리고.react-native 59.2이미 이미지, 스토리보드, 유니버설 이미지 1개를 추가한 후 추가 단계를 거쳐야 했습니다.
- 이미지를 마우스 오른쪽 버튼으로 클릭하고 클릭합니다.
Show in Finder그런 다음 편집합니다.Contents.json파일 - 2x 및 3x 섹션에 이미지 추가
- "규칙자" 메뉴를 사용하여 화면 시작 스토리보드로 이동합니다.
- 외부의 빨간색 화살표가 아닌 내부의 빨간색 화살표만 켜져 있는지 확인합니다.
- "안전 영역 상대 여백" 클릭
이제 이미지가 모든 크기의 iPhone(Portrait에서 테스트) 중심에 놓여야 합니다.
기존 LaunchScreen .xib 파일 React Native를 처음에 설정했지만 사용자 고유의 로고와 배경색(Ract Native 기본 텍스트는 사용하지 않음)을 사용하려면 다음 지침을 따르십시오. https://medium.com/ @kelleyannerose/filename-ios-filename-in-xcode-b53b84430ec
여전히 문제가 있는 사람들을 위해, iOS Launch 화면이 작동하기 전에 승인된 답변에서 한 단계 더 누락된 것이 있습니다.
열다.Info.plist프로젝트 폴더에서 "Main nib file base name" 키를 삭제합니다.그런 다음 다시 빌드하면 문제가 사라지기를 바랍니다.
위의 해결책을 따르자 앱이 스플래시 화면에 멈춰서 아래의 7단계를 수행하여 iOS에 사용자 지정 스플래시 화면을 추가했습니다.
- X 코를열다찾다니습을음을 .
LaunchScreen.xib프로젝트의 파일(ios에 기본적으로 표시되는 화면임을 유의하십시오.) - 화면의 텍스트를 제거/편집하려면 해당 텍스트를 클릭하고 원하는 대로 필요한 변경을 수행합니다.
- 배경색을 변경하려면 오른쪽 사이드 바에서 다음 아이콘을 찾고 왼쪽에서 네 번째로 맨 위에 있는 작은 아이콘 단추를 클릭합니다(이동하면 "속성 검사기 표시"라고 표시됨).
- 이제 배경색을 변경하는 방법을 알았으므로 시작 화면에 이미지를 추가하여 다음 단추를 클릭하고 목록에서 이미지 보기를 선택한 다음 시작 화면에서 원하는 위치로 끌어 놓으십시오.
를 이를추합니야다가해에 해야 합니다.
Images.xcassets▁it▁so▁▁that▁we▁▁can도있수.LaunchScreen.xib을 하기 는 게하위기해렇그 to.Images.xcassets을 클릭합니다.+에 다음버튼튼▁followed가 나옵니다.import시작 화면에 표시할 이미지를 추가합니다. 아래AppIcon이미지 파일 이름이 표시됩니다.이것은 우리가 우리의 문서에서 참조할 이름입니다.LaunchScreen.xib에는 이제우리우추리이참합니다미조야해가에 추가한 를 참고해야 합니다.
LaunchScreen.xib.LaunchScreen.xib다음을 클릭합니다.image view앞에서 추가한 내용과 오른쪽 모서리에 다양한 옵션이 표시됩니다.다음과 같은 첫 번째 항목을 클릭합니다.image55단계에서합니다.
- 하고 실행합니다.
react-native run-ios그리고 당신은 변화를 봐야 합니다.
시작 화면 이미지 소스를 이미지 세트로 설정해야 합니다.그런 다음 LauncScreen.xib 파일을 삭제합니다.그런 다음 프로젝트에서 글로벌 검색을 수행하고 LaunchScreen.xib에 대한 모든 참조를 제거합니다(전체 프로젝트를 살펴봅니다).나는 sublime 텍스트 편집기를 사용해서 cmd+shift+f)이고 작동해야 합니다.
언급URL : https://stackoverflow.com/questions/34027270/ios-launch-screen-in-react-native
'programing' 카테고리의 다른 글
| SQL Server의 문자열에 varbinary (0) | 2023.05.12 |
|---|---|
| Angular 2 - 세트 내부에서 'this' 사용Timeout (0) | 2023.05.12 |
| Swift에서 인덱스로 매핑 또는 축소 (0) | 2023.05.12 |
| Try / Finally (Catch 없이) 예외를 거품으로 만들 것입니까? (0) | 2023.05.12 |
| '사용자 "postgres"에 대한 암호 인증에 실패 (0) | 2023.05.07 |