React Native启动屏本地化咨询：多语言适配及默认设置需求

Great question! Localizing splash screens in React Native is trickier than app strings because splash screens are handled natively by iOS and Android—so we need to set this up separately for each platform. Here's how to make it work: show English for English devices, French for French, and default to English for all others.

iOS Implementation #

iOS uses either a LaunchScreen.storyboard or asset catalog for splash screens. We'll use the asset catalog approach since it's cleaner for localization:

• First, prepare your splash screen images: create English (splash_en@1x.png, splash_en@2x.png, splash_en@3x.png) and French (splash_fr@1x.png, etc.) versions, matching the required resolution for each iOS device scale.
• Open your React Native project in Xcode, navigate to Assets.xcassets, and create a new Image Set named SplashScreen.
• Select the SplashScreen image set, then in the right-hand Attributes Inspector, find the Localization section. Click the + button and add English and French (leave English as the base language).
• Drag your English splash images into the English slots, and French images into the French slots of the image set.
• Open LaunchScreen.storyboard, add a UIImageView that fills the entire screen (set leading/trailing/top/bottom constraints to the safe area or screen edges), then set its Image property to SplashScreen.
• Verify your project has localization support: go to your project's Info tab, under Localizations, ensure French is added (click + if not).
• Test: Switch your device's language to French, launch the app—you'll see the French splash screen. For any other language, iOS will fall back to the base English image.

Android Implementation #

Android handles splash screens via drawable resources or the newer SplashScreen API (Android 12+). We'll cover both approaches to support all versions:

For Android 11 and below #

• Prepare your splash images: create English (splash_en.png) and French (splash_fr.png) versions, with variants for each density (mdpi, hdpi, xhdpi, etc.).
• Create language-specific resource folders in android/app/src/main/res:
  • drawable-fr (for French drawables)
  • mipmap-fr (if you store splash images in mipmap instead of drawable)
• In res/drawable, create a splash_screen.xml layer-list file for the default English splash:

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:drawable="@color/white" /> <!-- Match your app's background color -->
      <item>
          <bitmap
              android:gravity="center"
              android:src="@mipmap/splash_en" />
      </item>
  </layer-list>
  

• Copy this splash_screen.xml to res/drawable-fr, and update the android:src to @mipmap/splash_fr.
• Define a splash theme in res/values/styles.xml:

  <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowBackground">@drawable/splash_screen</item>
      <item name="android:windowFullscreen">true</item>
  </style>
  

• Apply this theme to your main activity in AndroidManifest.xml:

  <activity
      android:name=".MainActivity"
      android:theme="@style/SplashTheme">
      <!-- Rest of your activity config -->
  </activity>
  

For Android 12+ (SplashScreen API) #

• If targeting Android 12+, use the official SplashScreen API for better animations and consistency:
• In res/values/themes.xml, define a splash theme that inherits from Theme.SplashScreen:

  <style name="SplashTheme" parent="Theme.SplashScreen">
      <item name="windowSplashScreenBackground">@color/white</item>
      <item name="windowSplashScreenAnimatedIcon">@mipmap/splash_en</item>
      <item name="postSplashScreenTheme">@style/AppTheme</item> <!-- Your app's main theme -->
  </style>
  

• Create res/values-fr/themes.xml and override the animated icon for French:

  <style name="SplashTheme" parent="Theme.SplashScreen">
      <item name="windowSplashScreenBackground">@color/white</item>
      <item name="windowSplashScreenAnimatedIcon">@mipmap/splash_fr</item>
      <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>
  

• In your MainActivity.java or MainActivity.kt, add the splash screen initialization before setContentView:

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      SplashScreen.installSplashScreen(this);
      setContentView(R.layout.activity_main);
  }
  

• Test: Switch to French language, and Android will load the French splash screen. All other languages will use the default English version.

Key Notes #

• Make sure all image variants (different densities/scales) are provided for each language to avoid blurry or stretched splash screens.
• For iOS, if you prefer using LaunchImage instead of LaunchScreen.storyboard, you can create language-specific LaunchImage folders, but LaunchScreen.storyboard is the modern, recommended approach.
• Always test on physical devices (not just simulators/emulators) to ensure the language switch works as expected.

内容的提问来源于stack exchange，提问作者syam vakkalanka