在React Native中添加启动图标（Expo环境，无需Android Studio/Xcode）

Hey there! Since you’re working with Expo, you don’t need to mess around with Android Studio or Xcode to set up your app’s launch icon—Expo handles all the heavy lifting for you. Here’s how to do it step by step:

1. Prepare Your Icon Asset #

First, you’ll need a high-resolution master icon. Expo recommends a 1024x1024 PNG file (no transparency unless you’re creating adaptive Android icons, which we’ll cover later). Place this file somewhere in your project, like ./assets/icons/icon.png (create the folders if they don’t exist).

2. Update Your app.json Configuration #

Open your project’s app.json file (or app.config.js for dynamic configs) and locate the expo section. Add or update the icon field to point to your master icon:

{
  "expo": {
    "name": "Your App Name",
    "slug": "your-app-slug",
    "icon": "./assets/icons/icon.png", // Path to your master icon
    // ... other existing configs
  }
}

Optional: Platform-Specific Tweaks #

If you want to customize the icon for iOS or Android separately, add these platform-specific settings:

• iOS: Set a background color (Expo automatically adds the required rounded corners):

  "ios": {
    "icon": "./assets/icons/icon.png",
    "backgroundColor": "#ffffff"
  }
  

• Android: For adaptive icons (optimized for modern Android devices), define a foreground icon (1024x1024 with transparency for the inner design) and a background color:

  "android": {
    "adaptiveIcon": {
      "foregroundImage": "./assets/icons/adaptive-foreground.png",
      "backgroundColor": "#ffffff"
    }
  }
  

3. Apply the Changes #

• Managed Workflow (no native code): Just restart your Expo dev server with expo start—Expo will automatically generate all required icon sizes for both platforms and apply them instantly.
• Bare Workflow (with native folders): Run expo prebuild --clean to regenerate native files with your new icon. You still don’t need to open Android Studio or Xcode for this.

Quick Pro Tips #

• Give your master icon enough padding around the main design—Expo will crop it slightly to fit different platform requirements.
• Avoid tiny text in your icon, as it might get scaled down and become unreadable on smaller devices.

Once you’ve followed these steps, your new launch icon will show up in your emulator/simulator right away, and it’ll be included in any production builds you create with expo build or eas build. No heavy IDEs required!

内容的提问来源于stack exchange，提问作者Ilkin Guluzada