How to add icons to React Native app

问题:

I am making a React Native app. I would like to customize the app icon (meaning the icon that you click on to start the app). I have Googled this, but I keep finding different types of icons that refer to different things. How do I add these types of icons to the app?

回答1:

iOS Icons

• Set AppIcon in Images.xcassets.
• Add 9 different size icons:
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

Images.xcassets will look like this:

Android Icons

• Put ic_launcher.png in folders [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
  • 72*72 ic_launcher.png in mipmap-hdpi.
  • 48*48 ic_launcher.png in mipmap-mdpi.
  • 96*96 ic_launcher.png in mipmap-xhdpi.
  • 144*144 ic_launcher.png in mipmap-xxhdpi.
  • 192*192 ic_launcher.png in mipmap-xxxhdpi.

回答2:

I wrote a generator to automatically generate icons for your react native app from a single icon file: https://blog.bam.tech/developper-news/how-to-generate-your-react-native-app-icons-in-a-single-command-line.

It generates your assets and it also adds them correctly to your ios and android project.

Install it

You need node 6 installed and image-magick.

Then install the generator with

npm install -g yo generator-rn-toolbox

Use it

Have a single icon file at the ready somewhere. The icon has to be 1024x1024 size.

Then in your React Native project, run:

yo rn-toolbox:assets --icon <path to your icon>
# For instance
yo rn-toolbox:assets --icon ../icon.png

You will be asked for the name of your react-native project. For instance, if you created your project with react-native init MyAwesomeProject, your project name is MyAwesomeProject.

When you are asked, ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?, reply with Y.

And... that's it!

Hope it can be useful for others :)

回答3:

I would use a service to scale the icon correctly. http://makeappicon.com/ seems good. Use a image on the larger size as scaling up a smaller image can lead to the larger icons being pixelated. That site will give you sizes for both iOS and Android.

From there its just a matter of setting the icon like you would a regular native app.

https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/AddingLaunchImagestoanAssetCatalog.html

Set icon for android application

回答4:

I was able to add an app icon to my react-native android project by following this guy's advice and using Android Asset Studio

Here it is, transcribed in case the link goes dead:

How to upload an Application Icon in React-Native Android

1) Upload your image to Android Asset Studio. Pick whatever effects you’d like to apply. The tool generates a zip file for you. Click Download .Zip.

2) Unzip the file on your machine. Then drag over the images you want to your /android/app/src/main/res/ folder. Make sure to put each image in the right subfolder mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3) Do not (as I originally did) naively drag and drop the whole folder over your res folder. As you may be removing your /res/values/{strings,styles}.xml files altogether.

回答5:

Someone made a very easy to use tool just for this task: https://www.npmjs.com/package/app-icon

This simple tool allows you to create a single icon in your react-native project, then create icons of all required sizes from it. It currently works for iOS and Android.

I've used it. Made a 512x512 png and then ran that tool and boom, done. Super easy.

回答6:

You'll need different sized icons for iOS and Android, like Rockvic said. In addition, I recommend this site for generating different sized icons if anybody is interested. You don't need to download anything and it works perfectly.

https://resizeappicon.com/

Hope it helps.

回答7:

Coming in a bit late here but Android Studio has a very handy icon asset wizard. Its very self explanatory but has a few handy effects and its built right in:

回答8:

You can import react-native-elements and use the font-awesome icons to your react native app

Install

npm install --save react-native-elements

then import that where you want to use icons

import { Icon } from 'react-native-elements'

Use it like

render() {
   return(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}

回答9:

I would like to suggest to use react-native-vector-icons to import icons to your project. As you use vector icons, you don't need to worry much on icon scaling side. While using the package you are able to use all popular icon set such as fontawesome, ionicons etc..

Besides these iconsets you can also bring your own icons too to your react-native project by packing your icons as a ttf file and you can import that ttf directly to both android and ios project. You can utilise the same react-native-vector-icons library to manage those icons

Here is a detailed procedure to setup custom icons

https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

回答10:

If you're using expo just place an 1024 x 1024 png file in your project and add an icon property to your app.json i.e. "icon": "./src/assets/icon.png"

https://docs.expo.io/versions/latest/guides/app-icons