[ios] React Native의 iOS 시작 화면

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

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

Images.xcassets의 LaunchImage

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

이미지 옵션 시작

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

여기에 이미지 설명 입력

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

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

미리 감사드립니다.



답변

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

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

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

여기에 이미지 설명 입력

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

  • Default@2x.png (640×960)
  • Default-568h@2x.png (640×1136)
  • Default-667h@2x.png (750×1334)
  • Default-Portrait-736h@3x.png (1242×2208)
  • Default-Landscape-736h@3x.png (2208×1242)

또한 같은 폴더 에이 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
  • 시작 화면 (스플래시 화면)에 대해 해상도 가 2208×2208 픽셀 이상인 정사각형 이미지 또는 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를 사용하여 앱을 다시 실행합니다.

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