React-native: [초기화] 실행 화면 흰색 플래시

@alinz - 다음 릴리스에서 수정되었습니다. https://github.com/tadeuzagallo/react-native/commit/8d992262ed2dcf0d46e8d22e605764902c33012f

@alinz 는 https://www.dropbox.com/s/xq522ywqsd16vqe/example.mov?dl=0 과 같이 보 입니까?

@liubko 네, 바로 이것이 제가 없애고 싶은 것입니다. 아직 패치를 적용하지 않았지만 오늘 밤에 할 것입니다.

@brentvatne : 그 패치가 이 문제를 어떻게 고칠지 모르겠다(내가 장님/바보라면 용서해 주세요 :-). 문제는 앱이 시작되고 React가 여전히 작동하는 사이에 시간이 있다는 것입니다. 이상적으로 LaunchScreen은 React가 완료되고 "완전 네이티브" 앱에서와 같이 완전히 렌더링될 때까지 표시됩니다.

@oblador - 아, 이렇게 하면 "깜박임" 순간에 시작 화면과 동일한 배경색을 사용하여 더 부드럽게 전환할 수 있습니다.

@vjeux - FB 앱에서 이 문제를 어떻게 극복합니까? 내가 올바르게 이해하면 100% React Native인 F8이 시작 화면에서 앱으로 직접 전환된다는 것을 알았습니다. cc @nicklockwood

이 문제에 대한 (별도의) 수정 사항도 있습니다. RCTRootView 의 새로운 loadingView 속성을 사용하고 시작 이미지를 표시하는 전체 화면 UIImageView 합니다. 코드는 다음과 같을 수 있습니다.

UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MyLaunchImage"];
rootView.loadingView = launchView;

발사 이미지를 자동으로 감지하여 이를 완전히 자동으로 만드는 방법을 실험해 왔지만 아직 준비가 완료되지 않았습니다. 관심이 있는 경우 다음과 같이 표시됩니다.

// TODO: support landscape orientation

// Get launch image
NSString *launchImageName = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
  CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);
  if (height == 480) launchImageName = @"[email protected]"; // iPhone 4/4s
  else if (height == 568) launchImageName = @"[email protected]"; // iPhone 5/5s
  else if (height == 667) launchImageName = @"[email protected]"; // iPhone 6
  else if (height == 736) launchImageName = @"[email protected]"; // iPhone 6+
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  CGFloat scale = RCTScreenScale();
  if (scale == 1) launchImageName = @"LaunchImage-700-Portrait~ipad.png"; // iPad
  else if (scale == 2) launchImageName = @"LaunchImage-700-Portrait@2x~ipad.png"; // Retina iPad
}

// Create loading view
UIImage *image = [UIImage imageNamed:launchImageName];
if (image) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];
  imageView.contentMode = UIViewContentModeBottom;
  imageView.image = image;
  rootView.loadingView = imageView;
}

@nicklockwood가 설명한 것에 대한 쉬운 해결책은 iOS 8 이상을 사용하는 경우 실행 화면 xib를 로드하는 것입니다.

@ide 나는 launchscreen xib를 사용하고 있습니다. 시작 시 lauchscreen 보기가 표시되지만 앱이 부팅되기 전에 흰색 보기(플래시)가 표시됩니다.

@alinz , @ide 는 launchscreen xib를 사용하여 RCTRootView loadingView를 설정하는 것을 의미한다고 생각합니다(여전히 수동으로 수행해야 함). (아직) 그렇게 하기 위한 자동 지원은 없습니다.

명확히 하자면 iOS는 React가 로딩을 _시작_하는 시점에 시작 화면을 숨깁니다. 빈 화면이 표시되지 않도록 하려면 RCTRootView의 loadingView와 동일한 보기를 수동으로 표시하여 시작 화면이 표시되는 시간을 연장해야 합니다.

@nicklockwood 의 설명에 감사드립니다. 그게 내 잘못이었다. :)

http://stackoverflow.com/a/29115477/255765의 Curtesy 나는 이것으로 끝났습니다.

for (NSString *imgName in allPngImageNames){
    // Find launch images
    if ([imgName containsString:@"LaunchImage"]){
      UIImage *img = [UIImage imageNamed:imgName]; //-- this is a launch image
      // Has image same scale and dimensions as our current device's screen?
      if (img.scale == [UIScreen mainScreen].scale && CGSizeEqualToSize(img.size, [UIScreen mainScreen].bounds.size)) {
        NSLog(@"Found launch image for current device %@", img.description);
        UIImageView *launchView = [[UIImageView alloc] initWithImage: img];
        rootView.loadingView = launchView;
      }
    }
  }

작동하는 것 같습니다.

표준/문서화된 방법의 경우 +1입니다.

@dvine-multimedia가 위에서 제공한 코드 조각보다 더 잘 작동합니까?

@myusuf3

@nicklockwood 실제로 그들은 거의 같은 일을 합니다. 내가 이것을 조사하기 시작했을 때 나는 xcode 경험이 전혀 없기 때문에 당신의 스니핑으로 무엇을 해야 하는지 이해하지 못했을 것입니다. 마침내 내가 무엇을 해야 하는지 이해하는 지점에 이르렀을 때, 나는 당신이 이미 거기에 있었다는 것을 깨닫지 못했습니다. 그 외에도 개인적으로 "내"솔루션이 조금 더 읽기 쉽습니다. 그러나 그 순수한 미학.

@nicklockwood 코드를 시도했지만 여전히 흰색 플래시가 표시됩니다. 로딩 뷰로 설정할 시작 이미지를 만들었습니다. 시작 이미지는 launchScreen.xib와 동일합니다.

이것은 우리 앱의 출시를 보류하는 유일한 것입니다. 도움을 주셔서 감사합니다.

실행 이미지를 숨긴 후 플래시가 나타나거나 실행 이미지가 나타나지 않습니까? (이것은 그냥 보는 것만으로는 결정하기 어려울 수 있습니다. 실행 이미지를 일시적으로 확실한 빨간색 직사각형과 같은 것으로 변경하십시오).

@nicklockwood xib 파일과 launchScreen Image 간의 색상을 변경하려고 했습니다. 나는 여전히 그 플래시를 보고 있었다.

내 코드는 다음과 같습니다.

 UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"launchScreen1"]];
 rootView.loadingView = launchView;

 rootView.loadingViewFadeDelay = 0.0;
 rootView.loadingViewFadeDuration = 0.15;

이제 마지막 두 줄 loadingViewFadeDelay와 duration을 제거했는데 문제가 해결된 것 같습니다. 플래시가 보이지 않습니다. 부드러운 전환이 좋습니다.

@chirag04 방금 샘플 프로젝트로 시도했는데 플래시가 보이지 않았습니다 :(

여기 내가 한 일이 있습니다

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"whiteFlash"
                                                   launchOptions:launchOptions];

  //here's what I did
  UIImage *image = [UIImage imageNamed:@"LaunchImage"];
  if (image) {
    UIImageView *launchView = [[UIImageView alloc] initWithImage: image];
    launchView.contentMode = UIViewContentModeBottom;
    launchView.image = image;
    rootView.loadingView = launchView;
  }
  ///////////////////////////

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;

확인. 더 깊이 파고 들면 플래시가 asyncstore에서 값을 로드할 때까지 내 앱이 아무 것도 렌더링하지 않는 것 같습니다.

render() {
  if(!this.state.loaded) return (null);
  return <View ...../>;
}

loadingView는 js가 렌더링을 완료했다고 생각하고 loadingView를 숨깁니다. 그러나 js는 return null 렌더링을 마쳤습니다.

@nicklockwood @alinz 그냥 공중에서 촬영 중입니다. 실제 이유가 아닐 수 있습니다. 어떻게 생각하세요?

또한 내가 알아차린 한 가지는 loadingViewFadeDelay 등의 값을 0.30 이상으로 설정하면 전환이 매우 매끄럽다는 것입니다. 기본값은 0.25로 부드럽습니다.

loadingFadeDelay의 목적은 정확히 앱이 아무 것도 즉시 렌더링하지 않는 시나리오를 처리하는 것이므로 올바르게 사용하고 있습니다.

기본값이 변경되는 경우를 대비하여 loadingViewFadeDelay를 명시적으로 설정하는 것을 고려할 수 있으며 로드하는 데 시간이 더 오래 걸리는 경우 지원하는 가장 느린 장치에서 테스트해야 합니다.

@nicklockwood 솔루션을 좋아하지만 예측할 수 없는 네트워크 대기 시간을 고려해야 합니다.

다른 솔루션은 구성 요소 상태를 일종의 기본값으로 설정하여 구성 요소에 일종의 로드 대화 상자를 표시하도록 지시하는 것입니다.

시원한. 나는 해결책이 있다고 생각합니다.

세 가지 구성 요소가 모두 동일한 것에 대해 어떻게 생각하십니까?

1) launchScreen.xib
2) loadingView
3) return null in render to actually render a view which is like loadingView and launchScreen.xib?

그러나 포인트 3이 다른 장치에서 어떻게 확장되는지 확실하지 않습니다. 여러분도 그렇게 제안하시겠습니까?

시작 시간이 네트워크 다음 테스트에 따라 달라지는 경우 페이드 지연보다 빠르게 다운로드되기를 바라는 대신 "빈" 보기를 즉시 그리는 것을 옹호합니다.

비동기에 따라 다릅니다. 네트워크 없음

네트워크에 의존하든 그렇지 않든 저는 타임베이스 디스플레이를 사용하는 것을 별로 좋아하지 않습니다. 설정한 시간이 정확하다고 100% 보장할 수 있는 방법은 없습니다. 무언가가 일어나고 있지만 표시할 준비가 되지 않았음을 나타내기 위해 항상 사용자에게 무언가를 표시해야 합니다. 이것은 단지 제안일 뿐입니다.

동의. 표준 iOS 로딩 이미지와 마찬가지로 loadingView의 목적은 앱이 표시할 준비가 된 모든 것이 로딩 스피너인 경우에도 앱이 무언가를 표시할 준비가 될 때까지 덮는 것입니다.

즉, 이미지 대신 뷰로 만든 이유는 정적이 아닌 상태로 만들 수 있기 때문입니다. 원하는 경우 loadingView에 UIActivityIndicatorView를 추가할 수 있습니다.

발사 이미지는 어떻게 배치할 수 있습니까? 프레임 원점을 조정해 보았지만 어떤 원점을 사용하든 항상 중앙에 위치합니다. 상단에 배치하고 왼쪽에서 오른쪽으로 뻗어있는 작은 상단 막대 이미지가 있습니다.

이것이 내가 가진 것입니다.

  UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
  CGRect frame = launchView.frame;
  frame.origin.x = 0;
  frame.origin.y = 0;
  launchView.frame = frame;
  rootView.loadingView = launchView;
  rootView.loadingViewFadeDelay = 0.0;
  rootView.loadingViewFadeDuration = 0.0;

시작 이미지가 아니라 시작 _view_이므로 다른 컨테이너 보기 내부에 imageView를 배치하고 컨테이너를 시작 보기로 사용할 수 있습니다.

UIView *launchView = [[UIView alloc] init];
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
imageView.frame = CGRectMake(whatever);
[launchView addSubview:imageView];
...

사실, 래퍼로 화면 공간을 채우고 이미지를 맨 위에 배치할 수 있다고 가정합니다. 래퍼는 RootView에 의해 자동으로 중앙에 배치됩니다 .

@Intellicode 네.

@dvine-multimedia의 코드를 사용하여 iphone 4s에서 프로덕션 환경에서 앱을 중단했습니다. 수정은 if에 휴식을 넣는 것입니다.

containsString ios 7에서 사용할 수 없기 때문에 한 번 더 충돌합니다.

@nicklockwood 로드 뷰가 가능한 최상의 해상도를 자동으로 선택하는지 궁금하십니까?

loadingView는 이미지를 전혀 선택하지 않고 전달한 내용만 사용합니다. 시작 inage를 찾기 위해 위에 게시한 스니펫은 장치에 대한 올바른 해상도를 선택합니다.

귀하의 스니펫은 올바른 치수를 가진 것을 선택하지 않습니다. 그것에 대한 어떤 수정?

내 솔루션이나 dvine의 솔루션을 사용하고 있었습니까? 어떤 iPhone 모델을 사용하고 있습니까? 초상화 또는 풍경?

dvine을 사용할 때 올바른 차원을 선택합니다. ur 솔루션을 사용하면 이미지 주위에 검은 공간이 생깁니다. 나는 검은 공간이 잘못된 치수로 이미지를 선택하기 때문에 있다고 가정합니다.

저는 아이폰 6입니다. 초상화입니다.

이것이 어떻게 생겼는지입니다. 흰색 배경에 주목하세요.

다음 코드 사용:

UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
  rootView.loadingView = launchView;
  rootView.loadingViewFadeDelay = 0.20;
  rootView.loadingViewFadeDuration = 0.20;

그것은 내가 게시 한 솔루션이 아니 었습니다. 이것은 다음과 같습니다.

// Get launch image
NSString *launchImageName = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
  CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);
  if (height == 480) launchImageName = @"[email protected]"; // iPhone 4/4s
  else if (height == 568) launchImageName = @"[email protected]"; // iPhone 5/5s
  else if (height == 667) launchImageName = @"[email protected]"; // iPhone 6
  else if (height == 736) launchImageName = @"[email protected]"; // iPhone 6+
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  CGFloat scale = RCTScreenScale();
  if (scale == 1) launchImageName = @"LaunchImage-700-Portrait~ipad.png"; // iPad
  else if (scale == 2) launchImageName = @"LaunchImage-700-Portrait@2x~ipad.png"; // Retina iPad
}

// Create loading view
UIImage *image = [UIImage imageNamed:launchImageName];
if (image) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];
  imageView.contentMode = UIViewContentModeBottom;
  imageView.image = image;
  rootView.loadingView = imageView;
}

젠장! 귀하의 의견을 주의 깊게 읽었으면 합니다. 귀하의 솔루션은 효과가 있으며 이해하기 쉽습니다.

I've been experimenting with a way to automatically detect the launch image and make this completely automatic, but it's not really ready yet. If you're interested, it looks like this:

아마도 experimenting 일 것입니다. 내가 어떻게 놓쳤는지 확실하지 않습니다. 미안 내 실수.

도움을 주셔서 감사합니다. 다음 버전에서 이 코드를 사용할 것입니다. 모든 경우를 커버하는 것 같습니다. 풍경이 필요하지 않습니다.

허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허허하 나는 아마도 "이것이 우리가 지금 프로덕션에서 사용하고 있는 것이고, 정상적으로 작동하는 것 같습니다"라고 말했어야 했습니다 :-)

"이것은 우리가 지금 프로덕션에서 사용하고 있는 것입니다"는 앱 스토어에서 별 1개로부터 우리를 구해 주었을 것입니다. ㅋ. 걱정 마. 세상을 구할 새로운 버전이 항상 있습니다. :)

이 문제를 종료하시겠습니까?

세부 사항에 대해 충분히 논의되었기 때문에 이 티켓을 닫고 몇 가지 좋은 솔루션을 가지고 있습니다.

LaunchScreen xib를 사용하는 사람들을 위해 이것을 100% 명확하게 하기 위해 다음은 해당 작업을 수행하는 코드입니다.

UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
launchScreenView.frame = self.window.bounds;
rootView.loadingView = launchScreenView;

return YES 라고 표시된 줄 바로 위에 있는 AppDelegate.m 파일의 application didFinishLaunchingWithOptions 메서드에 해당 줄을 추가합니다.

@arnemart 는 이 방법이 ios 8+에서만 작동한다는 것을 더 명확하게 하고 있습니다. 맞습니까?

@arnemart 감사합니다! 완벽하게 작동합니다 .

LaunchImage 를 사용하는 경우 이미지 크기가 올바르게 조정되도록 frame 및 contentMode 를 모두 설정해야 합니다.

UIImageView *launchScreenView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
launchScreenView.frame = self.window.bounds;
launchScreenView.contentMode = UIViewContentModeScaleAspectFill;
rootView.loadingView = launchScreenView;

@arnemart 의 주석과 마찬가지로 AppDelegate.m 파일의 return YES 줄 위에 있는 application didFinishLaunchingWithOptions 메서드에 다음 줄을 추가합니다.

기이 한. RN v.0.11.4에서 앱은 먼저 검은색 화면과 함께 시작된 다음 앱을 로드하기 전에 LaunchScreen.xib를 시작합니다. iOS 9 w/ @arnemart 수정 https://github.com/facebook/react-native/issues/1402#issuecomment -130236507. 어떤 아이디어?

@irfaan은 window.backgroundColor를 [UIColor redColor]와 같은 것으로 변경하려고 시도합니다. 그러면 검정색이 창에서

self.window.backgroundColor = [UIColor redColor]; 내부의 didFinishLaunchingWithOptions 는) 아무 것도 변경되지 않았습니다. LaunchScreen.xib 전에는 여전히 검은색입니다. 그래서 창문에서가 아니라 @nicklockwood 처럼

디버깅에 대해 어떻게 추천합니까?

iOS는 앱이 로드될 때까지 launchScreen.xib를 전혀 로드하지 않는 것처럼 들립니다(이 시점에서 React는 이를 loadingView로 표시합니다).

아마도 Xcode의 구성 오류입니까? 아니면 iOS 9의 버그일까요?

장치에서 시도했습니까, 아니면 시뮬레이터에서만 시도했습니까?

@nicklockwood 감사

안녕하세요 @genexliu님 , 이미지의 "LaunchImage" 세트를 Images.xcassets/LaunchImage.launchimage/ 했지만 붙여넣은 코드와 LaunchScreen.storyboard 모두 해당 이미지를 찾거나 사용할 수 없습니다(둘 다 자동으로 실패함). 내 LaunchScreen 스토리보드는 배경색을 볼 때 올바르게 로드되지만 참조된 이미지는 표시하지 않습니다. 어떤 아이디어?

또한 XCode에서 실행할 때의 시작 순서는 정상적으로 보이지만 cmd 행에서 natal launch 를 실행할 때 시작 순서/추가 흰색 플래시 등의 추가 실행이 있는 것 같습니다.

LaunchImage를 찾지 못하는 Storyboard의 문제는 분명히 XCode의 버그였습니다. 시작 설정을 '자산 카탈로그 사용'으로 변경한 다음 다시 '스토리보드 사용'으로 변경하고 작동을 시작했습니다. @genexliu 의 코드가 저에게 효과가 있는지 loadingViewFadeDelay 효과가 없는 것 같습니다.

내 코드는 다음과 같습니다.

  UIImageView *launchScreenView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Images/LaunchImage"]];
  launchScreenView.frame = self.window.bounds;
  launchScreenView.contentMode = UIViewContentModeScaleAspectFill;
  rootView.loadingView = launchScreenView;
  rootView.loadingViewFadeDelay = 5000;

그러나 스토리보드 LaunchImage 디스플레이와 초기 React render 사이에는 지연이 없습니다.

@"Images/LaunchImage"가 나에게 맞지 않습니다. 아마도 @"LaunchImage"일 것입니다.

오, 예. 네가 옳아. 그것은 내가 시도한 순열 중 하나입니다(첫 번째는 아님).

또한 3개월 전 위의 내 댓글에서 예제 코드를 확인하십시오. 다른 장치 클래스에 대한 많은 시작 이미지 파일이 있습니다.

도! 당신이 옳았. LaunchImage 다시 전환하면 이제 작동합니다. 고마워!

누구든지 Android에 대한 이것에 대한 문서를 알려줄 수 있습니까?

안드로이드용 +1

cc @dmmiller Android에 loadingView 기능이 있습니까?

안녕하세요, 저는 이와 동일한 문제를 겪고 있는데 여기에 몇 가지 게시된 솔루션이 있는 것을 보았지만 이 코드를 어디에 넣어야 할지 모르겠습니다. 내가 이해한 바에 따르면 해결책은 React Native 자체 내에서 수행할 수 있는 것이 아니라 Objective-C 코드를 변경하는 것입니다. 맞습니까? 이 경우 게시된 코드는 어디로 가나요? xcode 프로젝트 루트의 main.m 파일에서? 감사 해요.

@CorpusCallosum 코드는 RCTRootView가 설정된 AppDelegate.m 파일에 있어야 합니다.

@nicklockwood 감사합니다. 시도해 보겠습니다.

이 코드는 흰색 플래시가 보이지 않는 한 지금은 작동하고 있으며 내 이미지가 초기 화면에 로드되지만 이제 실제 앱이 로드되지 않습니다! 콘솔에서 볼 수 있지만 앱이 로드되어 실행 중이며 상호 작용(탭 및 스와이프)도 작동하지만 실제로는 앱이 전혀 보이지 않고 멈춥니다. 그 초기 화면에서 이유를 알겠어요?

다음은 내 AppDelegate.m 파일의 코드입니다.

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  //use launch image as BG image for app
  UIImageView *launchScreenView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage-blank-grey"]];
  launchScreenView.frame = self.window.bounds;
  launchScreenView.contentMode = UIViewContentModeScaleAspectFill;
  rootView.loadingView = launchScreenView;
  rootView.loadingViewFadeDelay = 1000;

  return YES;

@CorpusCallosum 줄을 제거해 볼 수 있습니다.
rootView.loadingViewFadeDelay = 1000;
또는 스플래시 화면과 앱 사이의 전환을 값으로 미세 조정하십시오(단위는 밀리초가 아니라 초라고 생각합니다. 이것이 스플래시에 "고착"된 것처럼 보이는 이유입니다).
줄을 완전히 제거하는 것이 효과가 없으면 0-5 사이의 값을 설정해 보십시오(정수가 아닌 값도 설정할 수 있음).

저를 위해 일하고 있습니다. 감사합니다. :)

launchscreen xib를 loadingView로 사용하려는 사람들을 위해 다음은 AppDelegate.m에 삽입할 코드입니다.

UIView *loading = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
rootView.loadingView = loading;
rootView.loadingViewFadeDelay = 1;

마지막 줄은 선택 사항입니다. 위에서 언급했듯이 앱 자체로 이동하기 전에 loadingView가 유지되는 시간을 설정합니다.

@david-정말 감사합니다! 나는 네이티브 반응 테스트를 시작한 이후로 이것을 다루고 있습니다. 👏

@david-a, @geriux : 내 LaunchScreen.xib에 AspectFill 콘텐츠 모드가 있는 배경 이미지가 있고 크기가 올바르게 조정되지 않았기 때문에 launchScreenView.frame = CGRectZero; 도 설정해야 했습니다. 몇 번의 시행 착오 끝에 해결책을 찾았지만 원인이 무엇인지 잘 모르겠습니다.

@BasitAli 예, 죄송합니다. 더 잘 문서화해야 합니다. 보기의 크기를 0이 아닌 값으로 설정하면 화면 중앙에 표시됩니다. 0으로 설정하면 화면에 맞게 크기가 조정됩니다.

@david-정말 감사합니다! 귀하의 의견은 상용구에 포함되거나 최소한 기본 반응 기본 문서의 일부여야 합니다. 이 문제가 2015년 3월에 종료된 이유가 확실하지 않지만 2016년 2월의 RN 0.20에 여전히 존재합니다.

누군가가 문서에 대한 PR을 할 수 있다면 좋을 것입니다.

여러분의 조언은 저에게 많은 도움이 됩니다(IOS에서는 완벽하게 작동함). Android에서 이 문제를 해결할 방법을 찾는 사람이 있습니까?

도움이 될까요?

https://github.com/remobile/react-native-splashscreen

@weiyisheng , iOS에서 위에서 설명한 수정 사항과 함께 Android에서 @braco가 제안한 대로 react-native-splashscreen을 사용하고 있습니다.

@braco @BasitAli 예, 도움이 되었습니다. 제 앱에서 사용할 것입니다. 좋은 생각입니다. 고마워요.

@BasitAli 호기심에 iOS에서 사용하지

내 응용 프로그램은 시작 화면에서 로그인 화면으로 매끄럽게 애니메이션됩니다(로고가 위로 이동하고 로그인 필드가 튀어나옴). rn-splashscreen 플러그인이 페이드 아웃되어 내 애니메이션과 잘 어울리지 않습니다. 다른 선택의 여지가 없었기 때문에 Android에서 사용해야했습니다.

@BasitAli react-native-splashscreen 플러그인은 rootView.loadingViewFadeDuration 설정을 따르는 것처럼 보입니다. 단, 연결 후 설정했다면 페이드를 비활성화해야 합니다.

[RCTSplashScreen show:rootView];
rootView.loadingViewFadeDuration = 0;

"미리 번들된 파일에서 로드 중"이라는 상단의 작은 메시지를 제거하는 방법이 있습니까?

@rclai 는 릴리스할 계획을 설정했습니다.

아! 감사 해요!

두 플랫폼 스플래시 화면에 대한 반응 네이티브 솔루션이 있습니까? 두 플랫폼 모두 내부 파일을 입력하면 반응 네이티브를 사용할 수 없게 됩니다. 간단한 답변 부탁드립니다. 감사 해요

@rclai

"미리 번들된 파일에서 로드 중"이라는 상단의 작은 메시지를 제거하는 방법이 있습니까?

릴리스 모드에서는 표시되지 않고 디버그 모드에서만 표시됩니다. 디버그 모드에서도 숨기려면 AppDelegate에 [RCTDevLoadingView setEnabled:NO]; 를 넣어 숨길 수 있습니다.

@nicklockwood 안녕하세요, 맞습니까? 그렇지 않은 경우 무엇을 변경/삭제해야 합니까?

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"SomeApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

// Get launch image
NSString *launchImageName = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
  CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);
  if (height == 480) launchImageName = @"[email protected]"; // iPhone 4/4s
  else if (height == 568) launchImageName = @"[email protected]"; // iPhone 5/5s
  else if (height == 667) launchImageName = @"[email protected]"; // iPhone 6
  else if (height == 736) launchImageName = @"[email protected]"; // iPhone 6+
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  CGFloat scale = RCTScreenScale();
  if (scale == 1) launchImageName = @"LaunchImage-700-Portrait~ipad.png"; // iPad
  else if (scale == 2) launchImageName = @"LaunchImage-700-Portrait@2x~ipad.png"; // Retina iPad
}

// Create loading view
UIImage *image = [UIImage imageNamed:launchImageName];
if (image) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];
  imageView.contentMode = UIViewContentModeBottom;
  imageView.image = image;
  rootView.loadingView = imageView;
}

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@TeodorKolev 가 나에게 맞는 것 같습니다. 시작할 때 여전히 플래시가 표시되면 설정을 시도하십시오.

rootView.loadingViewFadeDelay

더 큰 값으로(초 단위 - 기본값은 0.25)

편집하다:

이 라인

UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];

아마 그냥 있어야합니다

UIImageView *imageView = [[UIImageView alloc] init];

감사합니다. 어떤 폴더에 해당 이미지를 추가해야 하나요? 이를 위해 추가 Contents.json이 필요합니까? 다음으로 시작하는 해당 코드에 여러 오류가 있습니다.
(https://cloud.githubusercontent.com/assets/10398337/13778676/e01e3d32-eabf-11e5-95bf-d7a1205a5ca1.png)
응시:

CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);

@TeodorKolev Xcode에는 추가하기 위한 GUI가 있습니다. Images.xcassets를 클릭한 다음 + 버튼을 클릭하고 "앱 아이콘 및 시작 이미지" > "새 iOS 시작 이미지"를 선택합니다.

@TeodorKolev 오류를 수정하려면 다음을 추가해야 합니다.

#import "RCTUtils.h"

AppDelegate에서.

감사합니다. 하지만 WebView URL이 완전히 로드될 때까지 스플래시 화면을 보고 싶은데 지금은 그렇게 작동하지 않습니다. 존경!

@nicklockwood 이것에 대한 해결책이 있습니까?

이 문제를 해결하는 현재 방법은 무엇입니까? 문제가 발생한 지 1년 몇 개월이 지났기 때문에 실제로 해결될 것인지 의심스러워 현재 해결 방법이 무엇인지 궁금합니다. 어떤 파일을 변경해야 하고 어떤 코드를 수정해야 합니까?

편집: 저는 launchscreen.xib와 함께 검은색 화면을 사용하고 있지만 중간에 앱이 완전히 로드되기 전에 흰색으로 바뀝니다.

@hasen6 문제는 이미 해결되었지만 개발자 측에서 약간의 작업이 필요합니다.

위의 설명에서 언급 한 바와 같이, 당신은 설정해야 rootView.loadingView 흰색 화면의 장소에 표시하고 조정하는 몇 가지 내용으로 rootView.loadingViewFadeDelay 로드 뷰가 이전에 숨겨진되지 않도록하는 방법 앱 로드가 완료되었습니다.

검은색 화면만 표시하려는 경우 loadingView를 사용하지 않고 rootView.backgroundColor 를 검은색으로 설정하기만 하면 되지만 실험을 해야 합니다.

rootView.backgroundColor = [UIColor clearColor]; 를 rootView.backgroundColor = [UIColor blackColor]로 변경했습니다. but it didn't make any difference. Doing a search in XCode for rootView.loadingView`가 결과를 반환하지 않았습니다.

@hasen6 흰색이 어디에서 오는지 알아내야 합니다. JS 앱 내부에 흰색이고 콘텐츠가 로드되기 전에 잠시 동안 표시되는 보기가 있을 수 있습니다.

loadingView 는 RCTRootView 의 속성입니다. 이 속성은 아마도 AppDelegate 내부에 의 인스턴스가 있을 것입니다. 실제 코드 rootView.loadingView 는 직접 추가하지 않는 한 Xcode에 표시되지 않습니다. 다음은 사용 방법의 예입니다.

rootView.loadingView = [UIView new];
rootView.loadingView.backgroundColor = [UIColor blackColor];
rootView.loadingViewFadeDelay = 0.5; // measured in seconds

내 앱은 어디에도 흰색이 아닙니다. 내 모든 앱은 실행 화면이 표시된 후 로드 시 동일한 흰색 화면을 표시하므로 내 앱에 문제가 없다고 확신합니다.

그래서 해당 코드를 appdelegate.m에 추가해야 합니까? 그것도 효과가 없었습니다. 나는 그것을 고치는 것이 거의 불가능할 것이라고 생각한다. 그렇지 않으면 개발자들이 아직도 그것을 해결하지 못한 채 1년이 지나지 않았을 것이다. 앱을 얼마나 나쁘게 만드는지 고려하면 분명히 해결해야 할 목록의 맨 위에 있을 것입니다.

FWIW, 이것이 내가 이 문제를 해결하는 방법입니다. 저는 LaunchScreen.xib 및 David-a의 솔루션을 사용하고 있습니다.

UIView *loading = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
rootView.loadingView = loading;
rootView.loadingViewFadeDelay = 1;

이 코드는 바로 아래에 삽입됩니다.

RCTRootView *rootView = [[RCTRootView alloc] etc etc etc...]

해당 코드를 nicklockwood의 샘플 코드로 바꾸면 흰색 플래시가 반환됩니다.

와! 좋아, 하나는 작동합니다. 고마워 그리타스!

@grittathh @hasen6 아, 알겠습니다. loadingView의 크기가 0인 경우 화면에 맞게 자동으로 크기가 조정된다는 사실을 잘못 기억했지만 분명히 그렇지는 않았습니다.

@hasen6 여기에 작동해야 하는 코드의 수정된 버전이 있습니다(xib 솔루션도 괜찮지만 검은색 화면만 사용하는 경우 중복됨).

rootView.loadingView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
rootView.loadingView.backgroundColor = [UIColor blackColor];
rootView.loadingViewFadeDelay = 0.5; // measured in seconds

참고: 1은 loadingViewFadeDelay에 대해 상당히 큰 값입니다. 앱이 시작되기 전에 사용자가 추가로 1초를 ​​기다려야 함을 의미하기 때문입니다. 나는 그것을 벗어날 수있는 가장 낮은 값으로 설정하는 것이 좋습니다 (0.25가 기본값이며 대부분의 앱에 적합합니다).

예, 1이 조금 길었고 내 앱 중 하나에서 시작 애니메이션이 누락되었습니다. 나는 0.1도 괜찮다는 것을 알았다. 당신의 도움을 주셔서 감사합니다.

@hasen6에 동의합니다. 사용자가 즉시 Objective-C( AppDelegate.m )에 뛰어들어 React Native 앱을 생성하는 즉시 일부 코드를 조정해야 한다는 것은 확실히 조금 이상해 보입니다. React Native가 이 수정 사항이 이미 적용된 코드를 생성할 수 없나요? 아니면 JavaScript(또는 선언적 구성 언어)에서 시작 화면 구성을 위한 보다 추상적인 솔루션을 도입하시겠습니까?

@johanatan 아이러니하게도 React Native의 가장 크고 오래 지속되는 두 가지 문제는 일종의 흰색 플래시와 관련이 있습니다. 이 오류와 이미지에 흰색이 깜박입니다.

내 LaunchScreen xib를 사용할 때 더 커지는 경향이 있습니다. 해결 방법이 있습니까?

무엇이 더 큰 경향이 있습니까?

UIView *loading = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil ] 개체 ctAtIndex:0 ];
rootView.loadingView = 로딩;

로딩 UI 보기, 크기가 조정되지 않는 것 같습니다. 내 LaunchScreen.xib인 스플래시 화면과 동일하다고 가정합니다.

크기 클래스와 제약 조건을 사용하고 있습니다.

@akoshdee 맞습니다 . 화면 크기와 일치하도록 보기 크기를 명시적으로 설정해야 합니다. 사용

loading.frame = [UIScreen mainScreen].bounds;

이미 프레임을 변경했지만 여전히 작동하지 않습니다

안드로이드에 대한 어떤 솔루션?

@ajoshdee loadingView.frame = [UIScreen mainScreen].bounds; 할당은 저에게 효과가 없었지만 다음은 작동했습니다: loadingView.frame = self.window.bounds;

이것은 내가 사용하는 것입니다 :

NSArray *nibObjects = [[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil];
UIImageView *loadingView = [nibObjects objectAtIndex:0];
loadingView.frame = self.window.bounds;
rootView.loadingView = loadingView;

여보세요! 보기에 반응하기 위해 색상을 설정했습니다.
rootViewController.view.backgroundColor = [UIColor blackColor];

@py110 @ajwhite

안드로이드 솔루션은 그것을 알아내는 데 얼마나 오랜 시간이 걸렸는지 나 자신에게 짜증이 날 정도로 어리석게 간단합니다.

3단계 스플래시 화면이 포함됩니다.

https://github.com/mehcode/rn-splash-screen/issues/1

비슷한 구현 @mehcode 가 있습니다. 하지만 여기에 있는 것이 마음에 getReactNativeHost() 호출이 있는 것을 보지 못했습니다. 알게 되어서 매우 좋습니다.

나는 다음을 수행했습니다 (만족하지 않음)

1. SplashActivity 앱이 열릴 때 시작됨
2. MainActivity 및 finish() 즉시 열기
3. MainActivity 는 MainActivity 위에 스플래시를 표시하기 시작하자마자 "전경 모드"임을 나타내는 플래그로 SplashActivity 를 시작합니다. 잠시 후 SplashActivity 가 닫히고 앱이 표시됩니다.

@ajwhite

감사 해요. 효과는 매우 부드럽습니다.

내 현재 프로젝트에서 나는 말 그대로 ReactActivity 를 내 코드베이스에 복사했고 mReactInstanceMangager 를 private 대신 protected로 만들었습니다.

react-native 0.29(댓글에서 말했어야 함)에서 react-native 팀은 우리에게 공개 메소드 getReactNativeHost() 를 제공했습니다.

ReactNativeHost 컨테이너는 훌륭한 움직임입니다. 이것이 바로 내가 겪은 문제입니다. MainActivity에서 수명 주기에 연결할 수 없습니다.

관심 참조: https://github.com/facebook/react-native/commit/49f20f41546e3ba8e7fe43c84c4c701684d0434d#diff -1346852de0c7f8466a36d42de50ec808R2

여기에 추가하려면...

내가 찾은 해결책은 rootView 에 배경색을 할당하지만 [UIColor colorWithPatternImage:img] 입니다.

완전히 로드될 때까지 계속 표시되도록 하기 위해 지연이 필요하지 않습니다.

장치에 대해 원하는 LaunchImage를 찾는 전체 스니펫(및 @dvine-multimedia에서 제공한 팁 사용)은 다음과 같습니다.

NSArray *allPngImageNames = [[NSBundle mainBundle] pathsForResourcesOfType:@"png" inDirectory:nil];
  for (NSString *imgName in allPngImageNames){
    if ([imgName containsString:@"LaunchImage"]){
      UIImage *img = [UIImage imageNamed:imgName];

      if (img.scale == [UIScreen mainScreen].scale && CGSizeEqualToSize(img.size, [UIScreen mainScreen].bounds.size)) {
        rootView.backgroundColor = [UIColor colorWithPatternImage:img];
      }
  }
}

이제 LaunchImage는 react-native 번들이 완전히 로드될 때까지 계속 표시됩니다.

나는 기회 없이 이 대화에서 거의 모든 코드 블록을 시도했지만 이것은 완벽하게 작동했습니다.
@dbonner1987 감사합니다!

안드로이드에 대한 어떤 솔루션?

@pareekkhushboo77 https://github.com/mehcode/rn-splash-screen/blob/master/docs/android.md

@sercanov @dbonner1987 이것은 또한 iOS에 대해 위에서 언급한 접근 방식을 사용하여 자바스크립트 실행 화면을 수행합니다.

@arnemart 감사합니다. 여전히 RN 0.30.0에서 작동합니다. 앱을 삭제하고 다시 설치해야 했습니다. 처음에는 흰색 플래시가 있었지만 그 이후에는 없었습니다.

@nicklockwood 실제 자바스크립트가 로드되는 시기를 알기 위해 사용할 수 있는 일종의 콜백이
그래서 저는 다음과 같이 하고 싶습니다.

• 로드 과정에서 위의 @dbonner1987 의 접근 방식을 사용하여 rootView 배경색을 런처 이미지로 설정합니다.
• 자바 스크립트가 로드를 완료하고 첫 번째 탐색 경로가 시작될 때(또는 해당 라인을 따라 무언가)
• rootView 배경색을 다시 흰색으로 설정합니다.

그래서 기본적으로 로딩이 완료되면 콜백이 필요합니다.

@UKDeveloper99 제가 위에 몇 번 링크한 문서를 참고하세요. 사용 가능한 콜백이 있습니다.

https://github.com/mehcode/rn-splash-screen/blob/master/docs/android.md

@mehcode 완전 감사합니다!!

번들이 로드되면 꺼지는 LaunchScreen.storyboard 구현 방법에 대한 제안이 있는 사람이 있습니까? 현재 고정된 시간 동안 표시되고 흰색 화면이 표시된 다음 애플리케이션이 RN 34.1 xcode 8을 로드합니다.

@ajoshdee 보기가 화면보다 훨씬 커지는 비슷한 문제가 있었습니다. 관련이 있는지 확실하지 않지만 LaunchScreen.xib 에서 AutoLayout을 사용하고 있었습니다.

나는 또한 설정해야했다

launchScreenView.autoresizingMask = UIViewAutoresizingNone;

사이즈를 알맞게 맞추려면.

따라서 위의 추가된 행과 함께 https://github.com/facebook/react-native/issues/1402#issuecomment -166963438

appdelegate.m 에서 이 줄을 교체하여 시작 색상을 업데이트할 수도 있습니다.

rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];

이 줄로 :
rootView.backgroundColor = [[UIColor alloc] initWithRed:0.94 green:0.90 blue:0.89 alpha:1.0];

이 웹사이트에서 원하는 색상 찾기

누군가 Android에서 이 문제를 해결했습니까?

ios와 android 모두에 대한 솔루션은 다음과 같습니다. https://github.com/mehcode/rn-splash-screen .
내 app.tsx(진입점)의 렌더링 기능에서 스플래시 화면을 숨기고 내 모든 https 요청이 완료될 때까지 동일한 이미지를 표시했습니다.

내 코드:
```
공개 렌더링()
{
SplashScreen.hide();

   //after everything has finished loading - show my app.
   if (this.state.isFinishedloading) 
    {
        return (
            <this.navigator screenProps={{ ...providers }} />
        );
    }

  // Until then show the same image as the splash screen with an ActivityIndicator.
    return (
       <View style={{ flex: 1 }}>
          <Image style={styles.image} source={require('../assets/img/splash.png')} >
            <ActivityIndicator  style={styles.indicator} color="#fff"></ActivityIndicator>
          </Image>
       </View>
    );

}

```

스플래시 화면에 스토리보드를 사용하는 경우 이에 대한 해결책이 있습니까? 더 이상 각 차원에 대한 시작 화면 이미지가 없습니다.

AppDelegate.m 내부의 iOS용 기본 반응에서 그에 따라 RGB 색상 코드를 작성하여 다음 줄을 변경합니다.

rootView.backgroundColor = [[UIColor alloc] initWithRed:52.0f/255.0f green:73.0f/255.0f blue:94.0f/255.0f alpha:1];

RED의 경우 숫자 52를 변경합니다.
GREEN의 경우 숫자 73을 변경하십시오.
파란색의 경우 숫자 94를 변경합니다.

_참고: 나는 react native v0.51.0_을 사용하고 있습니다.

안드로이드는 아직 솔루션이 없나요?

@otoinsa는 @neomib의 https://github.com/facebook/react-native/issues/1402#issuecomment -339336380 위의 답변을 https://github.com/crazycodeboy/react-native-splash-screen 과 같이 잘 작동하는 다른 스플래시 화면 라이브러리가 있습니다

LaunchScreen으로 사용되는 스토리보드에 대한 제안 사항이 있습니까?

내 접근 방식은 다음과 같았습니다(하지만 앱 시작 시 충돌)

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    NSURL *jsCodeLocation;
    [Fabric with:@[[Crashlytics class]]];

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                moduleName:@"MyApp"
                                initialProperties:nil
                                launchOptions:launchOptions];
    rootView.backgroundColor = [UIColor clearColor];

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

//  UIViewController *rootViewController = [UIViewController new];

  UIStoryboard *storyboard = self.window.rootViewController.storyboard;
  UIViewController *rootViewController = [storyboard instantiateViewControllerWithIdentifier:@"the_storyboard_id"];

    rootViewController.view = rootView;
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];
    return YES;
}

앱이 다음 오류와 함께 충돌합니다.

2018-03-30 11:21:04.995601+0530 MyApp[6119:101967] Running application MyApp ({
    initialProps =     {
    };
    rootTag = 1;
})
2018-03-30 11:21:05.014109+0530 MyApp[6119:101967] *** Assertion failure in -[UIApplication _runWithMainScene:transitionContext:completion:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3698.33.6/UIApplication.m:3529
2018-03-30 11:21:05.090174+0530 MyApp[6119:101967] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Application windows are expected to have a root view controller at the end of application launch'
*** First throw call stack:
(
    0   CoreFoundation                      0x000000011170f12b __exceptionPreprocess + 171
    1   libobjc.A.dylib                     0x0000000110001f41 objc_exception_throw + 48
    2   CoreFoundation                      0x00000001117142f2 +[NSException raise:format:arguments:] + 98
    3   Foundation                          0x000000010faa2d69 -[NSAssertionHandler handleFailureInMethod:object:file:lineNumber:description:] + 193
    4   UIKit                               0x000000010d838051 -[UIApplication _runWithMainScene:transitionContext:completion:] + 3102
    5   UIKit                               0x000000010dc016f8 __111-[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]_block_invoke + 924
    6   UIKit                               0x000000010dfd74c8 +[_UICanvas _enqueuePostSettingUpdateTransactionBlock:] + 153
    7   UIKit                               0x000000010dc012f1 -

감사 해요.

교체

UIStoryboard *storyboard = self.window.rootViewController.storyboard;

~와 함께

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];

이제 앱이 시작되지만 검은색 배경이 나타납니다.

또는 https://github.com/crazycodeboy/react-native-splash-screen을 사용할 수 있습니다. 훨씬 쉽습니다 :)