Tôi đang làm một ứng dụng React Native. Tôi muốn tùy chỉnh biểu tượng ứng dụng (có nghĩa là biểu tượng mà bạn nhấp vào để khởi động ứng dụng). Tôi đã Googled này, nhưng tôi tiếp tục tìm các loại biểu tượng khác nhau đề cập đến những thứ khác nhau. Làm cách nào để thêm các loại biểu tượng này vào ứng dụng?

Biểu tượng iOS

• Đặt AppIcontrong Images.xcassets.
• Thêm 9 biểu tượng kích thước khác nhau:
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

Images.xcassets sẽ trông như thế này:

Biểu tượng Android

• Đặt ic_launcher.pngtrong các thư mục [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
  • 72 * 72 ic_launcher.pngtrong mipmap-hdpi.
  • 48 * 48 ic_launcher.pngtrong mipmap-mdpi.
  • 96 * 96 ic_launcher.pngtrong mipmap-xhdpi.
  • 144 * 144 ic_launcher.pngtrong mipmap-xxhdpi.
  • 192 * 192 ic_launcher.pngin mipmap-xxxhdpi.

Cập nhật Android 2019

Các phiên bản mới nhất của Reacigen cũng hỗ trợ biểu tượng tròn. Đối với trường hợp cụ thể này, bạn có hai lựa chọn:

A. Thêm biểu tượng tròn: Trong mỗi thư mục mipmap, thêm vào ic_launcher.pngtệp cũng có phiên bản tròn được gọi ic_launcher_round.pngvới cùng kích thước.

B. Xóa các biểu tượng tròn: Bên trong yourProjectFolder/android/app/src/main/AndroidManifest.xmlxóa dòng android:roundIcon="@mipmap/ic_launcher_round"và lưu nó.

Khác khi xây dựng ném một lỗi.

Tôi đã viết một trình tạo để tự động tạo biểu tượng cho ứng dụng gốc phản ứng của bạn từ một tệp biểu tượng duy nhất. Nó tạo tài sản của bạn và nó cũng thêm chúng chính xác vào dự án ios và Android của bạn:

Cập nhật (04/09/2019)

Chúng tôi đã tân trang lại máy phát điện của mình để cập nhật các tiêu chuẩn hệ sinh thái. Bây giờ bạn có thể sử dụng @ bam.tech / Reac -igen-make .

Bạn có thể cài đặt nó bằng cách sử dụng: yarn add @bam.tech/react-native-maketrong dự án gốc-Reac

Để sử dụng nó react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

Và ... thế thôi! Hy vọng nó có thể hữu ích cho người khác :)

Khuyến nghị:

• Hình ảnh cơ sở 1024x1024
• Không có nền trong suốt cho iOS
• Một biểu tượng tuân theo các nguyên tắc biểu tượng thích ứng cho Android

Dưới đây là một số cải tiến so với công cụ trước:

• Không phụ thuộc vào Yeoman, giờ đây nó là một plugin phản ứng tự nhiên
• Không phụ thuộc Magick hình ảnh
• Tạo biểu tượng thích ứng cho Android
• Thêm kích thước biểu tượng bị thiếu cho iOS

Tôi sẽ sử dụng một dịch vụ để thu nhỏ biểu tượng một cách chính xác. http: // mak Ứng dụng có vẻ tốt. Sử dụng một hình ảnh ở kích thước lớn hơn khi nhân rộng một hình ảnh nhỏ hơn có thể dẫn đến các biểu tượng lớn hơn được pixel hóa. Trang web đó sẽ cung cấp cho bạn kích thước cho cả iOS và Android.

Từ đó, chỉ cần đặt biểu tượng như bạn sẽ là một ứng dụng gốc thông thường.

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

Đặt biểu tượng cho ứng dụng Android

Tôi đã có thể thêm biểu tượng ứng dụng vào dự án Android gốc phản ứng của mình bằng cách làm theo lời khuyên của anh chàng này và sử dụng Android Asset Studio

Đây là, phiên âm trong trường hợp liên kết bị chết:

Cách tải lên Biểu tượng ứng dụng trong React-Native Android

1) Tải hình ảnh của bạn lên Android Asset Studio . Chọn bất kỳ hiệu ứng nào bạn muốn áp dụng. Công cụ tạo tệp zip cho bạn. Nhấp vào Tải xuống .Zip.

2) Giải nén tập tin trên máy của bạn. Sau đó kéo qua các hình ảnh bạn muốn vào /android/app/src/main/res/thư mục của bạn . Đảm bảo đặt từng ảnh vào thư mục con bên phảimipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3) Đừng (như tôi ban đầu đã làm) ngây thơ kéo và thả toàn bộ thư mục trên thư mục res của bạn. Như bạn có thể loại bỏ các /res/values/{strings,styles}.xmltập tin của bạn hoàn toàn.

Ai đó đã tạo một công cụ rất dễ sử dụng chỉ cho nhiệm vụ này: https://www.npmjs.com/package/app-icon

Công cụ đơn giản này cho phép bạn tạo một biểu tượng duy nhất trong dự án gốc phản ứng của mình, sau đó tạo biểu tượng với tất cả các kích thước bắt buộc từ nó. Nó hiện đang hoạt động cho iOS và Android.

Tôi đã sử dụng nó. Tạo một 512x512 png và sau đó chạy công cụ đó và bùng nổ, xong. Siêu dễ.

Đến hơi muộn ở đây nhưng Android Studio có trình hướng dẫn tài sản biểu tượng rất tiện dụng. Nó rất tự giải thích nhưng có một vài hiệu ứng tiện dụng và được tích hợp ngay trong:

Bạn sẽ cần các biểu tượng có kích thước khác nhau cho iOS và Android, như Rockvic nói. Ngoài ra, tôi khuyên bạn nên trang web này để tạo các biểu tượng có kích thước khác nhau nếu có ai quan tâm. Bạn không cần phải tải xuống bất cứ thứ gì và nó hoạt động hoàn hảo.

https://resizimicon.com/

Hy vọng nó giúp.

Điều này hữu ích cho những người đang vật lộn để tìm trang web tốt hơn để tạo biểu tượng và màn hình giật gân

• Tạo biểu tượng ứng dụng (hữu ích cho cả Android và ios)
• Các công cụ APE (hữu ích cho cả Android và ios)
• Trình tạo bộ biểu tượng (chỉ hữu ích cho ios)
• Andoid Asset Studio (chỉ hữu ích cho Android + được đề xuất *)

Nếu bạn đang sử dụng expo, chỉ cần đặt tệp 1024 x 1024 png trong dự án của bạn và thêm thuộc tính biểu tượng vào app.json tức là "icon": "./src/assets/icon.png"

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

Tôi muốn đề nghị sử dụng các biểu tượng phản ứng-gốc-vector để nhập các biểu tượng vào dự án của bạn. Khi bạn sử dụng các biểu tượng vector, bạn không cần phải lo lắng nhiều về tỷ lệ biểu tượng. Trong khi sử dụng gói, bạn có thể sử dụng tất cả các bộ biểu tượng phổ biến như fontawgie, ionicons, v.v.

Bên cạnh các bộ biểu tượng này, bạn cũng có thể mang các biểu tượng của riêng mình cho dự án gốc phản ứng của bạn bằng cách đóng gói các biểu tượng của bạn dưới dạng tệp ttf và bạn có thể nhập trực tiếp ttf đó cho cả dự án android và ios. Bạn có thể sử dụng cùng thư viện biểu tượng phản ứng-gốc-vector để quản lý các biểu tượng đó

Dưới đây là một quy trình chi tiết để thiết lập các biểu tượng tùy chỉnh

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

Bạn có thể nhập các phần tử phản ứng gốc và sử dụng các biểu tượng phông chữ tuyệt vời cho ứng dụng gốc phản ứng của bạn

Tải về

npm install --save react-native-elements

sau đó nhập vào nơi bạn muốn sử dụng biểu tượng

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

Sử dụng nó như

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