React Native 앱으로 작업 중이며 사용자 지정 시작 화면을 설정하려고하는데 할 수 없습니다.

React Native는 기본적으로 LaunchScreen.xib를 생성하므로 Images.xcassets 내에 LaunchImage를 생성했습니다.

또한 내 옵션의 "앱 아이콘 및 실행 이미지"에서 "실행 화면 파일"을 수정해야한다고 읽었습니다.

이 작업을 마치면 시작 화면이 완전히 검게 변하고 앱이로드되면 상단 및 하단 검은 색 프레임이 모두 나타납니다.

그래서 React Native 프로젝트에서 시작 화면을 설정하기 위해 무엇을해야하는지 모르겠습니다.

누군가가 그러한 문제를 도와 줄 수 있으면 감사하겠습니다.

미리 감사드립니다.

이 스레드의 도움으로 문제를 해결할 수있었습니다 : Launch Image가 iOS 애플리케이션에 표시되지 않음 (Images.xcassets 사용)

그래서 다른 사람에게 도움이 될 수 있도록 깊이 설명하겠습니다.

먼저 특정 이미지를 만들어야합니다. 제가 사용한 것은이 템플릿과 자동 생성기가있는이 웹 페이지 였습니다 . TiCons

내 이미지를 다운로드 할 때 assets / iphone 폴더에있는 이미지를 가져 왔고 다음 이미지 만 가져 왔습니다.

• Default@2x.png (640x960)
• Default-568h@2x.png (640x1136)
• Default-667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• Default-Landscape-736h@3x.png (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를 내부 Images.xcassets 내 반작용 기본 프로젝트와 이미지 저장 폴더 Contents.json의 그 안에 파일 :

둘째 , Xcode 및 "일반"설정에서 " 앱 아이콘 및 실행 이미지 " 아래에서 " 시작 화면 파일 " 옵션을 비워 두어야합니다 ( 프로젝트 내 에서 LaunchScreen.xib 파일을 삭제할 수도 있음). )를 클릭하고 " 자산 카탈로그 사용 "을 클릭 합니다. 모달이 열리면 카탈로그 이미지 마이그레이션 을 선택합니다.

이제 " Launch Images Source "선택기에서 이전에 만든 폴더 인 LaunchImage (이미지 가있는 폴더)를 선택할 수 있습니다 .

Brand Assets 대신 이것을 선택 하고 Brand Assets 폴더를 삭제할 수 있습니다 .

이 시점에서 커스텀 시작 이미지로 React Native 애플리케이션을 실행할 수 있습니다.

쉬운 일이라고 생각하기에 조금 복잡해 보이지만 그것에 대해 많이 읽은 후에 이것이 스플래시 이미지를 작동시킬 수있는 유일한 방법 이었기 때문에 커뮤니티와 공유하고 싶었습니다.

시뮬레이터에서 앱을 삭제해야합니다. 그런 다음 프로젝트를 정리하십시오.

나는 새로운 시작 화면을 만드는 방법에 대한 솔루션을 포함하는 SO에서 이러한 답변을 많이보고 있습니다. 잠시 생각해 봅시다.

새로운 반응 네이티브 프로젝트를 만들 때 시작 화면에서 무엇을 볼 수 있습니까?

> Facebook의 기본 시작 화면

그래서 생각하게되었습니다. 어떻게했을까요?

그들은 LaunchScreen.xib

이유가 있다고 생각합니다. 그래서로 가서 LaunchScreen.xib기본 텍스트 "React Native ..."또는 그 내용을 변경했습니다. 앱을 한 번 더 실행하여 시작 화면에 편집 내용이 반영되었는지 확인했습니다.

해결 방법 1 기존 LaunchScreen.xib 편집

해결 방법 2 직접 만들기

그래서 나는 내 자신을 만드는 법을 배우는 것 보다이 대답을 입력하는 데 더 오래 걸렸습니다. Both of these solutions are compatible with all the devices.

1 단계:

지우다 LaunchScreen.xib

2 단계:

images.xcassets 공백 을 마우스 오른쪽 버튼으로 클릭 **import**한 다음 추가 할 이미지를 선택하십시오.

3 단계 :

프로젝트의 루트 폴더를 마우스 오른쪽 버튼으로 클릭하고 유형의 새 파일을 추가하고 Launch Screen원하는 이름을 지정하십시오.

4 단계

왼쪽 탐색 메뉴에서 프로젝트를 클릭하십시오로 이동 Settings> General및 아래 App Icons and Launch Images. Launch Image Source비어 있고 Launch Screen File새로 만든 시작 화면과 동일한 이름 인지 확인 합니다.

5 단계

에서 만든 새 파일을 클릭하고 원하는대로 step 2드래그 Image View하거나 편집하세요.

이제 끝났습니다. 솔루션을 청소할 필요도없고 다시 빌드하면됩니다.

최신 정보

generator-rn-toolbox더 이상 사용되지 않습니다. 사용이 반응-네이티브 만들 대신.

이전 답변

react-native를 사용하여 실행 화면 또는 메인 아이콘을 적용하려면 generator-rn-toolbox 를 권장 합니다. 반응 네이티브로 CLI를 통해 더 간단하고 사용하기 쉽습니다.

• XCode를 열 필요가 없습니다.
• 다양한 해상도의 이미지 파일을 많이 만들 필요가 없습니다.
• 언제든지 한 줄 추천을 사용하여 시작 화면을 변경합니다.

요구 사항

• 노드> = 6
• 시작 화면 (스플래시 화면)에 대해 해상도 가 2208x2208 픽셀 이상인 정사각형 이미지 또는 PSD 파일 1 개
• 긍정적 인 생각 ;)

설치

1. generator-rn-toolbox를 설치하고 요
2. npm install -g yo generator-rn-toolbox
3. imagemagick 설치 brew install imagemagick

4. iOS에서 스플래시 화면 적용

   yo rn-toolbox:assets --splash YOURIMAGE.png --ios

   또는 Android

   yo rn-toolbox:assets --splash YOURIMAGE.png --android

그게 다야. :)

출처

그냥 이것을 통과하고 치료를 작동합니다. 내가 발견 한 유일한 장애물은 시뮬레이터 콘텐츠를 지우지 않는 것입니다. 새 시작 화면이 작동하지 않는 경우 시뮬레이션을 열고 다음으로 이동해야합니다.

시뮬레이터> 콘텐츠 및 설정 재설정

해당 시뮬레이터 내에서 진행되는 하드 코어 캐싱이 있어야하지만 일단 완료되면 다시 실행하면 앱이 표시됩니다. xcode 시뮬레이터와 반응 네이티브 시뮬레이터 모두에 대해이 작업을 수행해야합니다!

'Launch Screen File'선택이 비어 있는지 확인하십시오.

이 링크를 따르십시오 :

내 React Native 애플리케이션에 스플래시 화면을 추가하려면 프로세스를 따르십시오.

1 단계 : 먼저 splashImageResource 폴더를 만들고 시작 이미지가있는 launchScreen.xib 파일을 추가했습니다.

STEP : 2 subviews 태그 안에 작성된 코드를 변경합니다. 이 코드로<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

STEP : 3 Xcode에서 앱을 열어야합니다. 따라야 할 단계는 다음과 같습니다.

a) 프로젝트 폴더로 이동

b) ios 폴더 열기

c) 확장자가 .xcodeproj 인 파일로 이동합니다. 제 경우에는 splasScreenTutorial.xcodeproj입니다.

d) Xcode에서이 파일을 엽니 다.

e) launchScreen.xib 파일을 삭제합니다.

f) splashScreenTutorial 폴더를 클릭 한 다음 TARGETS 섹션으로 이동합니다.

g) Xcode의 왼쪽 상단 모서리에있는 일반 탭을 클릭하고 앱 아이콘 및 실행 이미지까지 아래로 스크롤합니다.

h) 이미지 소스 실행으로 이동하여 자산 카탈로그 사용을 클릭합니다. 마이그레이션을 클릭하십시오.

i) 시작 화면 파일에서 텍스트 LaunchScreen을 제거합니다.

j) 프로젝트 폴더로 돌아가 Images.xcassets 파일을 엽니 다. AppIcon 및 LaunchImage가 표시되어야합니다.

k) 다음으로 LaunchImage를 클릭하고 마지막으로 크기가 다른 스플래시 화면 이미지를 Launch Image 상자로 드래그합니다.

이렇게 이미지를 드래그하세요.

스플래시 화면 테스트 a) 변경 사항을 확인하려면 앱을 처음 실행 한 경우 시뮬레이터에서 앱을 삭제해야합니다.

b) 앱을 삭제하려면 시뮬레이터 바의 하드웨어 메뉴를 클릭하고 홈으로 이동하십시오.

c) 삭제하려는 특정 앱 아이콘을 길게 누르고 아이콘의 X 기호를 클릭합니다.

d) react-native run-ios를 사용하여 앱을 다시 실행합니다.

스플래시 화면을 볼 수 있습니다.

에 나를 위해 XCode 10.1그리고 react-native 59.2내가 추가 단계를 통과했다 후 이미 이미지, 스토리 보드 및 1 개 보편적 인 이미지를 추가.

• 이미지를 마우스 오른쪽 버튼으로 클릭하고을 클릭 Show in Finder한 다음 Contents.json파일 을 편집합니다.
• 2x 및 3x 섹션에 이미지 추가
• "눈금자"메뉴가있는 시작 화면 스토리 보드로 이동합니다.
• 외부 빨간색 화살표가 아닌 내부 빨간색 화살표 만 켜져 있는지 확인하십시오.
• "안전 영역 상대 여백"을 클릭합니다.

이제 모든 크기의 iPhone에서 이미지가 중앙에 위치해야합니다 (Portrait에서 테스트 됨).

React Native가 초기에 설정 한 기존 Launch Screen .xib 파일을 사용하고 싶지만 자신의 로고와 배경색 (React Native 기본 텍스트없이)을 사용하려면 다음 지침을 따르십시오. https : // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

React의 도움으로 시작 화면을 생성하는 경우 iOS Xcode의 LaunchScreen.xib 파일에 동일한 것을 추가해야합니다. 스크린 샷을 찍어 Images.xcassets에 이미지로 추가 할 수 있습니다.

LaunchScreen을 연 다음 Xcode의 오른쪽 패널에서 개체 라이브러리의보기에 UIImageView를 추가합니다.

후행, 선행, 하단 및 상단 제약 조건을 뷰에 추가합니다. 아래 그림과 같이 -

앱이 실행될 때 동일하게 보이도록 UIImageView ContentMode를 AspectFit으로 변경하는 것을 잊지 마십시오.

그 후 AppDelegate에 코드를 추가해야 흰색 화면이 표시되지 않습니다. 코드는-

 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

여전히 문제가있는 사람들을 위해 iOS 시작 화면이 작동하도록하기 전에 수락 된 답변에서 한 단계 더 빠졌습니다.

Info.plist프로젝트 폴더를 열고 "Main nib file base name"키를 삭제합니다. 그런 다음 재건하고 문제가 해결되기를 바랍니다.

위의 솔루션을 따랐을 때 내 앱이 스플래시 화면에서 멈춰서 iOS에 사용자 정의 스플래시 화면을 추가하기 위해 다음 7 단계를 수행했습니다.

1. Xcode를 열고 LaunchScreen.xib프로젝트 에서 파일을 찾습니다 (iOS에서 기본적으로 표시되는 화면입니다).
2. 화면에서 텍스트를 제거 / 편집하려면 해당 텍스트를 클릭하고 원하는대로 필요한 변경을 수행하십시오.
3. 배경색을 변경하려면 오른쪽 막대에서 다음 아이콘을 찾아 맨 위, 왼쪽에서 네 번째에있는 작은 아이콘 버튼을 클릭합니다 (마우스를 가리키면 "속성 검사기 표시"라고 표시됨).

4. 배경색을 변경하는 방법을 알았으니 이제 스플래시 화면에 이미지를 추가하여 다음 버튼을 클릭하고 목록에서 이미지보기를 선택하고 스플래시 화면에서 원하는 위치에 끌어다 놓습니다.

5. 이제 이미지를에 추가하여 Images.xcassets에서 참조 할 수 있도록 LaunchScreen.xibgoto를 수행해야합니다 Images.xcassets. 버튼을 +클릭 한 다음 import스플래시 화면에 표시 할 이미지를 추가하십시오. 아래에 AppIcon이미지 파일 이름이 표시됩니다. 이것은 우리가 참조하기 위해 사용할 이름입니다.LaunchScreen.xib

6. 이제 LaunchScreen.xib파일에 추가 한 이미지를 참조해야 하므로 이전에 추가 한를 다시 탐색 LaunchScreen.xib하고 클릭 image view하면 오른쪽 모서리에 여러 옵션이 표시됩니다. 첫 번째를 클릭하고 image5 단계에서 가져온 이미지를 선택하십시오.

7. 프로젝트를 정리하고 실행 react-native run-ios하면 변경 사항이 표시됩니다.

시작 화면 이미지 소스를 이미지 세트로 설정해야합니다. 나중에 LauncScreen.xib 파일을 삭제하십시오. 나중에 프로젝트에서 전역 검색을 수행하고 LaunchScreen.xib에 대한 모든 참조를 제거하면 (전체 프로젝트를 살펴 봅니다. 저는 숭고한 텍스트 편집기를 사용하므로 cmd + shift + f입니다) 작동합니다.