如何在create-react-native-app创建的无原生代码应用中设置AppIcon？

Got it, let's walk through setting up your main app launch icon for a create-react-native-app project that doesn't have any native code. Since these projects are built on Expo under the hood, we can use Expo's built-in tools to handle all the icon resizing and platform-specific setup without touching native files.

Step 1: Prepare Your Icon Asset #

First, you need a high-quality source icon:

• Use a PNG file with a transparent background (if your design requires it)
• Minimum size: 1024x1024 pixels
• Do NOT add rounded corners or borders—iOS and Android will automatically apply their platform-specific icon styling (like rounded corners on iOS)

Save this file somewhere in your project, e.g., ./assets/icon.png.

Step 2: Set the Icon (Two Easy Methods) #

Method 1: Use Expo's CLI Tool (Simplest) #

This tool handles everything automatically—resizing the icon to all required platform sizes and updating your project config:

1. Open your terminal and navigate to your project root
2. Run this command:

   npx expo icons:set
   

3. Follow the on-screen prompts to select your source icon file (e.g., ./assets/icon.png)
4. Expo will generate all necessary icon variants and update your app configuration file automatically.

Method 2: Manual Configuration (For More Control) #

If you prefer to edit the config file directly:

1. Open your project's app.json (or app.config.js if you're using a dynamic config)
2. Find the expo section, and add/modify the icon property to point to your source icon:

   {
     "expo": {
       "name": "Your App Name",
       "slug": "your-app-slug",
       "icon": "./assets/icon.png", // This is the line you need
       // ... other existing config
     }
   }
   

3. Save the file, then restart your Expo development server.

Step 3: Test the Icon #

• For development: Restart your Expo Go app or reload the project. On iOS, you may need to delete the app from your device/simulator and reinstall it (iOS caches app icons heavily).
• For production builds: When you run npx expo build:ios or npx expo build:android, Expo will use your configured icon for the final app bundle.

Important Notes #

• Make sure your source icon is high-resolution—blurry source icons will result in blurry app icons across devices.
• Avoid adding any platform-specific effects (like shadows or rounded corners) to your source file; Expo handles these automatically to match each platform's design guidelines.
• If you're using an older version of create-react-native-app (pre-Expo integration), you'll still follow the same steps since those projects rely on Expo's managed workflow.

内容的提问来源于stack exchange，提问作者dippy tippy