React Native 앱을 만들고 있습니다. 앱 아이콘을 사용자 정의하고 싶습니다 (앱을 시작하기 위해 클릭하는 아이콘을 의미 함). 나는 이것을 구글 검색했지만 다른 것을 나타내는 다른 유형의 아이콘을 계속 찾습니다. 이러한 유형의 아이콘을 앱에 어떻게 추가합니까?

iOS 아이콘

• 설정 AppIcon에서 Images.xcassets.
• 9 가지 크기의 아이콘 추가 :
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

Images.xcassets 다음과 같이 보일 것입니다 :

안드로이드 아이콘

• ic_launcher.png폴더를 넣 습니다 [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
  • 72 * 72 ic_launcher.png에서 mipmap-hdpi.
  • 48 * 48 ic_launcher.png에서 mipmap-mdpi.
  • 96 * 96 ic_launcher.png에서 mipmap-xhdpi.
  • 144 * 144 ic_launcher.png에서 mipmap-xxhdpi.
  • 192 * 192 ic_launcher.png에서 mipmap-xxxhdpi.

2019 안드로이드 업데이트

반응 네이티브의 최신 버전은 원형 아이콘도 지원합니다. 이 특정한 경우 두 가지 선택이 있습니다.

A. 라운드 아이콘 추가 : 각 밉맵 폴더 에서 동일한 크기 ic_launcher.png의 라운드 버전도 파일에 추가하십시오 ic_launcher_round.png.

B. 둥근 아이콘 제거 : 내부 yourProjectFolder/android/app/src/main/AndroidManifest.xml에서 선을 제거 android:roundIcon="@mipmap/ic_launcher_round"하고 저장합니다.

그렇지 않으면 빌드에서 오류가 발생합니다.

단일 아이콘 파일에서 반응 네이티브 앱의 아이콘 을 자동으로 생성 하는 생성기를 작성했습니다 . 자산을 생성하고 iOS 및 Android 프로젝트에 올바르게 추가합니다.

업데이트 (04/09/2019)

우리는 발전기를 생태계 표준에 맞게 업데이트했습니다. 이제 @ bam.tech / react-native-make를 사용할 수 있습니다 .

반응 네이티브 프로젝트에서 다음을 사용하여 설치할 수 있습니다 .yarn add @bam.tech/react-native-make

그것을 사용 하려면 react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

그리고 그게 다야! 그것이 다른 사람들에게 유용 할 수 있기를 바랍니다 :)

추천 :

• 1024x1024 기본 이미지
• iOS에 투명한 배경이 없습니다.
• Android 용 적응 형 아이콘 지침 을 따르는 아이콘

이전 도구보다 개선 된 사항 은 다음과 같습니다 . 🥳

• Yeoman 의존성이 없으며 이제 react-native-cli 플러그인입니다.
• 이미지 Magick 의존성이 없음
• Android 용 적응 형 아이콘 생성
• iOS에 누락 된 아이콘 크기 추가

서비스를 사용하여 아이콘의 크기를 올바르게 조정합니다. http://makeappicon.com/ 은 좋아 보인다. 작은 이미지를 확대하면 더 큰 아이콘이 픽셀 화 될 수 있으므로 더 큰 크기의 이미지를 사용하십시오. 이 사이트는 iOS와 Android 모두 크기를 제공합니다.

거기에서 일반 네이티브 앱처럼 아이콘을 설정하면됩니다.

https://help.apple.com/xcode/mac/8.0/#/dev10510b1f7

Android 애플리케이션의 아이콘 설정

이 사람의 조언을 따르고 Android Asset Studio를 사용하여 반응 형 네이티브 안드로이드 프로젝트에 앱 아이콘을 추가 할 수있었습니다.

링크가 끊어 질 경우를 대비하여 다음과 같이 기록됩니다.

React-Native Android에서 애플리케이션 아이콘을 업로드하는 방법

1) 이미지를 Android Asset Studio에 업로드하십시오 . 적용 할 효과를 선택하십시오. 이 도구는 zip 파일을 생성합니다. 다운로드 .Zip을 클릭하십시오.

2) 컴퓨터에서 파일을 압축 해제하십시오. 그런 다음 원하는 이미지를 /android/app/src/main/res/폴더로 드래그하십시오 . 각 이미지를 오른쪽 하위 폴더에 넣어야합니다mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3) 원래 폴더를 순전히 res 폴더 위로 드래그 앤 드롭하지 마십시오. /res/values/{strings,styles}.xml파일을 완전히 제거 할 수도 있습니다 .

누군가이 작업을 위해 매우 사용하기 쉬운 도구를 만들었습니다 : https://www.npmjs.com/package/app-icon

이 간단한 도구를 사용하면 반응 네이티브 프로젝트에서 단일 아이콘을 만든 다음 필요한 모든 크기의 아이콘을 만들 수 있습니다. 현재 iOS 및 Android에서 작동합니다.

나는 그것을 사용했다. 512x512 png를 만든 다음 해당 도구와 붐을 실행했습니다. 매우 쉽습니다.

여기에 조금 늦었지만 Android Studio에는 매우 편리한 아이콘 자산 마법사가 있습니다. 자체 설명이 필요하지만 몇 가지 편리한 효과가 있으며 내장되어 있습니다.

Rockvic이 말했듯이 iOS와 Android에 대해 서로 다른 크기의 아이콘이 필요합니다. 또한 관심이 있다면 다른 크기의 아이콘을 생성하는 데이 사이트를 권장합니다. 아무것도 다운로드하지 않아도 완벽하게 작동합니다.

https://resizeappicon.com/

도움이 되길 바랍니다.

아이콘과 스플래시 화면을 생성하기 위해 더 나은 사이트를 찾는 데 어려움을 겪고있는 사람들에게 도움이됩니다.

• 앱 아이콘 만들기 (Android 및 iOS 모두에 유용)
• APE 도구 (Android 및 iOS 모두에 유용)
• 아이콘 세트 작성자 (ios에만 유용)
• Andoid Asset Studio (Android에만 해당 + 권장 *)

박람회를 사용하는 경우 프로젝트에 1024 x 1024 png 파일을 배치하고 app.json에 "icon": "./src/assets/icon.png"에 icon 속성을 추가하십시오.

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

반응 네이티브 벡터 아이콘을 사용하여 아이콘을 프로젝트로 가져 오는 것이 좋습니다. 벡터 아이콘을 사용할 때 아이콘 스케일링 측면에 대해 크게 걱정할 필요가 없습니다. 패키지를 사용하는 동안 fontawesome, ionicons 등과 같은 모든 인기있는 아이콘 세트를 사용할 수 있습니다.

이러한 아이콘 세트 외에도 아이콘을 ttf 파일로 압축하여 아이콘을 반응 네이티브 프로젝트에도 가져올 수 있으며 해당 ttf를 android 및 ios 프로젝트로 직접 가져올 수 있습니다. 동일한 반응 네이티브 벡터 아이콘 라이브러리를 사용하여 해당 아이콘을 관리 할 수 ​​있습니다

사용자 정의 아이콘을 설정하는 자세한 절차는 다음과 같습니다.

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

반응 네이티브 요소를 가져 와서 멋진 아이콘을 반응 네이티브 앱에 사용할 수 있습니다.

설치

npm install --save react-native-elements

아이콘을 사용하려는 곳으로 가져옵니다.

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

처럼 사용

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