expo-splash-screen的IOS设置

see：https://github.com/expo/expo/tree/main/packages/expo-splash-screen#-configure-ios

Add the package to your dependencies

npx expo install expo-splash-screen

 

📱 Configure iOS

Run npx pod-install after installing the package.

Manual Configuration

To achieve native splash screen (in iOS ecosystem it's called LaunchScreen) behavior, you have to provide either a SplashScreen.storyboard file or a SplashScreen.xib file, and configure your Xcode project accordingly.

The guide below shows how to configure your Xcode project to use a single image file as a splash screen using a .storyboard file (configuration for .xib filetype is analogous).

1. Add an image to Images.xcassets
2. Create SplashScreen.storyboard
3. Select Content Mode for the ImageView in SplashScreen.storyboard
4. Mark SplashScreen.storyboard as the LaunchScreen
5. (optional) Enable dark mode
6. (optional) Customize StatusBar

🛠 Add an image to Images.xcassets

First you need to add the image file that would serve as a splash screen to your native project's resources.

1. In your Xcode project open the .xcassets (often named Images.xcassets or Assets.xcassets) file.
2. In the content panel add New image set and name it SplashScreen.
3. Provide the splash screen image you've prepared (you have to provide it in three different scales).

Show image with details

🛠 Create SplashScreen.storyboard

This is the actual splash screen definition and will be used by the system to render your splash screen.

1. Create a SplashScreen.storyboard file.
2. Add a View Controller to the newly created .storyboard file:
   • open Library (+ button on the top-right),
   • find View Controller element,
   • drag-and-drop it to the .storyboard file.

Show image with details

3. Add an Image View to the View Controller:
   • first remove other View element from View Controller,
   • open Library (+ button on the top-right),
   • find Image View element,
   • drag-and-drop it as a View Controller child in view hierarchy inspector.

Show image with details

4. Set Storyboard ID to SplashScreenViewController:
   • select View Controller in view hierarchy inspector,
   • navigate to Identity Inspector in the right panel,
   • and set Storyboard ID to SplashScreenViewController.

Show image with details

5. Tick Is Initial View Controller in SplashScreenViewController:
   • select View Controller in view hierarchy inspector,
   • navigate to Attributes Inspector in the right panel,
   • and tick Is Initial View Controller in View Controller section.

Show image with details

6. Configure Image View source:
   • select Image View in view hierarchy inspector,
   • navigate to Attributes Inspector in the right panel,
   • select SplashScreen in Image parameter).

Show image with details

7. Configure Background of the Image View:
   • select Image View in view hierarchy inspector,
   • navigate to Attributes Inspector in the right panel,
   • configure Background parameter:
     • To enter a #RRGGBB value you need to select Custom option and in the Colors Popup that appeared you need to navigate to the second tab and choose RGB Sliders from dropdown select.

Show image with details

🛠 Select Content Mode for the ImageView in SplashScreen.storyboard

This is how your image will be displayed on the screen.

1. Open SplashScreen.storyboard and select Image View from View Controller.
2. Navigate to Attributes Inspector in the right panel and locate Content Mode.
3. Select one of the following:
   • Aspect Fit to obtain CONTAIN resize mode,
   • Aspect Fill to obtain COVER resize mode.
4. You can always choose other options to achieve different image positioning and scaling.

Show image with details

🛠 Mark SplashScreen.storyboard as the LaunchScreen

The newly created SplashScreen.storyboard needs to be marked as the Launch Screen File in your Xcode project in order to be presented from the very beginning of your application launch.

1. Select your project in Project Navigator
2. Select your project name from TARGETS panel and navigate to General tab.
3. Locate App Icons and Launch Images section and Launch Screen File option.
4. Select or enter SplashScreen as the value for located option.

Show image with details

🛠 (optional) Enable dark mode

Provide different background colors

Depending on what iOS version your application is targeting, you have to adjust your native project differently to a obtain working per-appearance splash screen view.

I'm targeting iOS 11+

You can take advantage of named colors in your Xcode project.

1. Create a new Color Set and customize its values for different color modes:
   • in your .xcassets directory (either create a new .xcassets for colors, or reuse an existing one e.g. with images) create New Color Set and name it SplashScreenBackground,
   • navigate to Attributes Inspector in the right panel and change Appearance to Any, Dark,
   • select desired color in Attributes Inspector in the right panel for each mode.

Show image with details

2. Select created named color as the Background for the Image View in SplashScreen.storyboard:
   • open SplashScreen.storyboard and select Image View in view hierarchy inspector,
   • navigate to Attributes Inspector in the right panel,
   • configure Background parameter by selecting your created named color (that should be listed as SplashScreenBackground).

Show image with details

I'm targeting iOS version < 11

You cannot use named colors feature in your Xcode project. Instead you have to create an additional image set that contains small 1x1px images, each with the desired background color. Then, you'll use this additional image resource as a background in the splash screen view.

You can use this online generator to obtain 1x1px .png images with desired colors: http://www.1x1px.me.

1. Create SplashScreenBackground Image Set with desired background colors for each mode in your Images.xcassets directory:
   • open your .xcassets directory with images,
   • in the content panel add New image set and name it SplashScreenBackground,
   • convert this Image set to support Dark Appearance by navigating to Attributes Inspector in the right panel and changing Appearance to Any, Dark,
   • provide images with colors for every mode (you can generate color 1x1px images using http://www.1x1px.me).

Show image with details

2. Update SplashScreen.storyboard to consist of a single top-level View with two Image View subviews (solid-colored image in the background and actual splash screen image in the foreground):

   • open SplashScreen.storyboard and replace Image View with a plain View (search Library for it and drag&drop it in place of current Image View),
   • add two

3. Configure first Image View (background color):

   • configure attributes in Attributes Inspector:
     • set Image to SplashScreenBackground (prepared in previous step),
     • set Content Mode to Scale To Fill (color needs to take all available space),
   • make this subview take all available space in parent view:
     • open Add new constraints bottom menu,
     • make sure Constrain to margin is not checked,
     • for every input, open the dropdown and select View (parent view reference) and set 0 as the value,
     • once every side is covered (0 value and parent view reference selected in dropdown) hit Add 4 Constraints,
     • observe that in View Hierarchy Inspector constraints are added and Image View resized to take whole place of parent view.

Show image with details

4. Configure second Image View (actual splash screen image):
   • select second Image View and select correct Image in Attributes Inspector alongside with desired Content Mode,
   • make this subview take all available space in parent view (see previous step).

Show image with details

Provide different splash screen image

You might want to add a separate image for dark mode. If the system is switched to dark mode, it would pick this different image instead of the normal one and present it in the splash screen view.

1. In your Xcode project open SplashScreen (created in previous section).
2. Convert this asset to support Dark Appearance:

• navigate to Attributes Inspector in the right panel,
• locate Appearances section and select Any, Dark,
• provide image for dark mode by dropping it to the correct box.

Show image with details

Background color when you want to support iOS < 11

If you're targeting a version of iOS < 11 then you cannot use named color feature and instead you need to generate images with desired background colors that are going to be used as the background for splash screen view. There is this awesome 1x1px png online generator: http://www.1x1px.me (use it to generate two 1x1px images with desired background colors for different color modes).

🛠 (optional) Customize StatusBar

You might want to customize the StatusBar appearance during the time the SplashScreen is being shown.

1. Customize StatusBar hiding flag:

• open main project view, select your project name from TARGETS panel and navigate to Info tab,
• add or modify Status bar initially hidden attribute with desired value.

Show image with details

2. Customize StatusBar style option:

• open main project view, select your project name from TARGETS panel and navigate to Info tab,
• add or modify Status bar style attribute with desired value.

Show image with details