android 에서 react-native 설정 을 사용 하여 시작 페이지 를 설정 하 는 과정 에 대한 자세 한 설명

배경
우리 가 react-native 를 사용 하여 코드 를 작성 할 때,응용 프로그램 을 시작 할 때,우 리 는 다음 과 같은 인 터 페 이 스 를 볼 수 있다
 
그러나 이러한 시작 화면 은 매우 좋 지 않 습 니 다.그러면 우 리 는 시작 화면 을 어떻게 처리 해 야 합 니까?다음 과 같은 두 가지 방안 이 있다.
방안
1.제3자 라 이브 러 리 사용(react-native-splash-screen)
2.ios 시스템 설정(ios 시스템 만 적용 되 며 설명 은 하지 않 습 니 다)
3.구체 적 인 실현 방식
1).react-native-splash-screen
1.설치

npm i react-native-splash-screen --save

2.대체 층 코드 연결
 1.링크 자동 설정

 react-native link react-native-splash-screen

or

 rnpm link react-native-splash-screen

2.링크 수 동 설정
Android 수 동 설정:
(1)android/settings.gradle 파일 에 다음 코드 를 추가 합 니 다.

include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

(2)android/app/build.gradle 파일 에 dependencies 대상 에 다음 코드 를 추가 합 니 다.

 dependencies {
  ...
  compile project(':react-native-splash-screen')
  ...
 }

(3)MainApplication.java 파일 에 다음 코드 를 추가 합 니 다.

 import org.devio.rn.splashscreen.SplashScreenReactPackage;
 ...
  @Override
  protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
   new MainReactPackage(),
   new SplashScreenReactPackage(), //        
  );
  }

이상 은 안 드 로 이 드 시스템 에서 링크 하 는 방식 이 고 다음은 ios 바 텀 링크 방식 입 니 다.
ios 수 동 설정:
(1)XCode 에서 항목 을 클릭 하고 전개 항목 을 열 고 오른쪽 단 추 를 눌 러 Libraries➜Add Files to[your procject's name],경로 node 선택modules➜react-native-splash-screen and add SplashScreen.xcodeproj SplashScreen.xcodeproj 프로젝트 파일 추가
(2)XCode 에서 항목 을 클릭 하여 항목 을 열 고 항목 을 선택 합 니 다.libSplashScreen.a 를 항목 의 Build Phases➜Link Binary With Libraries 에 추가 합 니 다.화면 은 다음 과 같 습 니 다.

(3)복구'SplashScreen.h'file not found,선택 항목→Build Settings→Search Paths→Header Search Paths to add:

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

화면 은 다음 과 같다.

이상 은 ios 시스템 의 링크 설정 방법 입 니 다.다음은 코드 에서 의 구체 적 인 사용 을 살 펴 보 겠 습 니 다.
3.사용

android：

(1)MainActivity.java 파일 에 다음 코드 를 추가 합 니 다.

 import android.os.Bundle; // here
 import com.facebook.react.ReactActivity;
 import org.devio.rn.splashscreen.SplashScreen; //          

 public class MainActivity extends ReactActivity {
  /**
  *      
  */
  @Override
  protected void onCreate(Bundle savedInstanceState) {
   SplashScreen.show(this); //          
   super.onCreate(savedInstanceState);
  }
  // ...other code
 }

(2)시작 페이지 그림 및 레이아웃 추가
경로 app/src/main/res/layot 에 파일 만 들 기(존재 하지 않 으 면 수 동 으로 만 들 기)이름 은 launchscreen.xml.그리고 다음 내용 을 입력 하 십시오:

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/launch_screen">
 </LinearLayout>

(3)res 폴 더 아래 에 다음 폴 더 를 만 들 고 해상도 그림 을 추가 합 니 다.각각 아래 폴 더 에 넣 어야 합 니 다.그림 이름과 xml 이 일치 하여 launch 라 고 명명 합 니 다.screen

   drawable-ldpi
   drawable-mdpi
   drawable-hdpi
   drawable-xhdpi
   drawable-xxhdpi
   drawable-xxxhdpi

여기까지 시작 페이지 의 로 딩 을 인터페이스 에서 볼 수 있 습 니 다.하지만 더 좋 은 효 과 를 얻 기 위해 서 는 폴 더 app/src/main/res/values/colors.xml 에 status 라 는 색 을 추가 합 니 다.bar_color,그 중 statusbar_color 는 상태 표시 줄 색상 설정 입 니 다.코드 는 다음 과 같 습 니 다.

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
    <color name="status_bar_color">#FF0000</color>
   </resources>

또한 시작 하 는 과정 에서 흰색 화면 이 나타 나 는 것 을 볼 수 있 습 니 다.시작 배경 을 투명 한 배경 으로 설정 하고 아래 방식 으로 처리 합 니 다.android/app/src/main/res/values/styles.xml 파일 을 열 고true을 추가 합 니 다.
파일 에 추가 한 결 과 는 다음 과 같 습 니 다.

   <resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <!-- Customize your theme here. -->
     <!--      -->
     <item name="android:windowIsTranslucent">true</item>
    </style>
   </resources>

물론 아래 와 같이 사용자 정의 시작 색 을 사용 할 수 있 습 니 다.
경로 android/app/src/main/res/values/colors.xml 파일 에 상태 표시 줄 설정 에 다음 코드 를 추가 합 니 다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <color name="status_bar_color"><!-- Colour of your status bar here --></color>
</resources>

경로 android/app/src/main/res/values/styles.xml 에 사용자 정의 스타일 을 추가 합 니 다.코드 는 다음 과 같 습 니 다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
  <item name="colorPrimaryDark">@color/status_bar_color</item>
 </style>
</resources>

그리고 시작 페이지 에서 보 여 주 는 스타일 선택 을 수정 하면 됩 니 다.

SplashScreen.show(this, R.style.SplashScreenTheme);

효 과 는 다음 과 같 습 니 다.우 리 는 상단 의 빨간색 상태 표시 줄 을 볼 수 있 습 니 다.
 
[ios_lanch_screen_custom.gif]

ios：

AppDelegate.m 파일 을 업데이트 하 는 코드 는 다음 과 같 습 니 다.

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h" //         

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
 NSURL *jsCodeLocation;

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

 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
              moduleName:@"LoveYouDeeply"
            initialProperties:nil
             launchOptions:launchOptions];
 rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

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

@end

그리고 LaunchImage 또는 LaunchScreen.xib 를 통 해 시작 페이지 를 사용자 정의 합 니 다.그 구체 적 인 과정 은 다음 과 같 습 니 다.
1.Xcode 로 ios 프로젝트 를 열 고 Image.xcassets 를 찾 아 선택 을 클릭 합 니 다.공백 에서 App Icons&Launch Images➜New ios Launch Image 를 선택 하고 이 단 계 를 완성 하면 LaunchImage 를 생 성 합 니 다.작업 화면 은 다음 과 같 습 니 다.
 
2.Image.xcassets➜LaunchImage 를 선택 하면 이전 단계 에 만 든 LaunchImage 입 니 다.오른쪽 상자 의 부분 은 지원 할 시스템,가로 세로 화면 등 을 선택 하 라 는 것 입 니 다.(이것 은 필요 에 따라 선택 합 니 다.만약 에 프로젝트 가 ios 6 를 지원 하지 않 으 려 면 선택 하지 않 아 도 됩 니 다)그리고 중간 부분 을 클릭 하여 해상도 상 자 를 선택 하고 해당 해상도 그림 을 시작 화면 으로 업로드 합 니 다.
다음은 선택 상자 의 서로 다른 화면의 해상 도 를 선택 하고 아래 에 제 시 된 픽 셀 에 따라 특정한 크기 의 그림 을 만들어 추가 하면 됩 니 다.

iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x
iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x
iPhone Portrait iOS 8-Retina HD 4.7 （750×1334） @2x
iPhone Portrait iOS 7,8-2x （640×960） @2x
iPhone Portrait iOS 7,8-Retina 4 （640×1136） @2x
iPhone Portrait iOS 5,6-1x （320×480） @1x
iPhone Portrait iOS 5,6-2x （640×960） @2x
iPhone Portrait iOS 5,6-Retina4 （640×1136） @2x

3.LaunchScreen.xib 를 선택 하면 팝 업 상자 가 있 습 니 다.기본 선택 으로 확인 한 다음 오른쪽 Use Launch Screen 을 선택 취소 합 니 다.(ios 는 그림 시작 화면 을 사용자 정의 하거나 LaunchScreen.xib 를 통 해 화면 을 시작 할 수 있 기 때 문 입 니 다.ios 기본 s 설정 은 여기에서 기본 설정 을 취소 합 니 다.)
화면 은 다음 과 같다.
 
4.그림 에서 프로젝트 프로젝트 를 선택 하면 오른쪽 에 프로젝트 의 기본 설정 이 나타 납 니 다.Launch Images Srouce 를 LaunchImage 로 설정 합 니 다.
현재,우리 의 모든 준비 작업 이 완료 되 었 습 니 다.다음은 js 코드 에서 의 사용 입 니 다.React-Native 코드 에서 시작 페이지 를 숨 깁 니 다.
js 코드 를 준비 한 후에 우 리 는 시작 페이지 를 숨 길 수 있 습 니 다.그 중에서 시작 페이지 를 숨 기 는 코드 는 다음 과 같 습 니 다.

import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import Router from './src/routerManager';

export default class App extends Component {
 constructor(props) {
 super(props);
  // do anything while splash screen keeps, use await to wait for an async task.
  //             
  SplashScreen.hide(); //       
 }
 render() {
 return (
  <Router {...this.props} />
 );
 }
}

ios 시스템 설정 에서,
효과 전시
Android：
 
이상 은 시작 페이지 의 설정 솔 루 션 입 니 다.
안 드 로 이 드 에서 react-native 설정 애플 리 케 이 션 시작 페이지 를 사용 하 는 과정 에 대한 자세 한 설명 은 여기까지 입 니 다.더 많은 안 드 로 이 드 react-native 설정 애플 리 케 이 션 시작 페이지 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!