ฉันกำลังสร้างแอป React Native ฉันต้องการปรับแต่งไอคอนแอพ (หมายถึงไอคอนที่คุณคลิกเพื่อเริ่มแอป) ฉันได้ Googled สิ่งนี้ แต่ฉันค้นหาไอคอนประเภทต่าง ๆ ที่อ้างอิงถึงสิ่งต่าง ๆ ฉันจะเพิ่มไอคอนประเภทเหล่านี้ลงในแอพได้อย่างไร

ไอคอน iOS

• ตั้งอยู่ในAppIconImages.xcassets
• เพิ่ม 9 ไอคอนขนาดต่างกัน:
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

Images.xcassets จะมีลักษณะเช่นนี้:

ไอคอน Android

• ใส่ในโฟลเดอร์ ic_launcher.png[ProjectDirectory]/android/app/src/main/res/mipmap-*/
  • 72 * 72 ในic_launcher.pngmipmap-hdpi
  • 48 * 48 ในic_launcher.pngmipmap-mdpi
  • 96 * 96 ในic_launcher.pngmipmap-xhdpi
  • 144 * 144 ในic_launcher.pngmipmap-xxhdpi
  • 192 * 192 ในic_launcher.pngmipmap-xxxhdpi

อัปเดต 2019 Android

เวอร์ชันล่าสุดของ Native react ยังรองรับไอคอนรอบ สำหรับกรณีนี้คุณมีสองทางเลือก:

A. เพิ่มไอคอนรูปวงกลม: ในแต่ละโฟลเดอร์ mipmap ให้เพิ่มเข้าไปใน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 / ตอบสนองพื้นเมือง-แต่งหน้า

คุณสามารถติดตั้งโดยใช้: 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 ตอนนี้มันเป็นปลั๊กอินแบบตอบสนองพื้นเมือง
• ไม่มีการพึ่งพาภาพ Magick
• สร้างไอคอน Adaptive สำหรับ Android
• เพิ่มขนาดไอคอนที่ขาดหายไปสำหรับ iOS

ฉันจะใช้บริการเพื่อปรับขนาดไอคอนอย่างถูกต้อง http://makeappicon.com/ดูดี ใช้รูปภาพที่มีขนาดใหญ่ขึ้นเนื่องจากการขยายภาพที่เล็กลงจะทำให้ไอคอนมีขนาดใหญ่ขึ้นเป็นพิกเซล ไซต์นั้นจะให้ขนาดสำหรับทั้ง iOS และ Android

จากตรงนั้นมันเป็นเพียงเรื่องของการตั้งค่าไอคอนเหมือนแอพทั่วไปที่คุณใช้

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

ตั้งค่าไอคอนสำหรับแอปพลิเคชัน Android

ฉันสามารถเพิ่มไอคอนแอพลงในโปรเจ็กต์ Android ที่ตอบสนองได้โดยทำตามคำแนะนำของผู้ชายคนนี้และใช้Android Asset Studio

นี่คือการถอดความในกรณีที่ลิงค์เสียชีวิต:

วิธีอัปโหลดไอคอนแอปพลิเคชันใน React-Native Android

1) อัปโหลดภาพของคุณเพื่อAndroid สินทรัพย์สตูดิโอ เลือกเอฟเฟกต์อะไรก็ได้ที่คุณต้องการนำไปใช้ เครื่องมือสร้างไฟล์ 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

ฉันเคยใช้มัน สร้าง png ขนาด 512x512 แล้วจึงเรียกใช้เครื่องมือและบูมดังกล่าวเสร็จสิ้น ง่ายสุด ๆ

มาช้าแล้วที่นี่ แต่ Android Studio มีตัวช่วยสร้างไอคอนที่มีประโยชน์มาก มันอธิบายตัวเองได้ดี แต่มีเอฟเฟกต์ที่มีประโยชน์น้อยและตัวมันอยู่ใน:

คุณจะต้องใช้ไอคอนขนาดต่าง ๆ สำหรับ iOS และ Android เช่น Rockvic กล่าว นอกจากนี้ฉันขอแนะนำเว็บไซต์นี้สำหรับการสร้างไอคอนขนาดแตกต่างกันหากใครสนใจ คุณไม่จำเป็นต้องดาวน์โหลดอะไรเลยและทำงานได้อย่างสมบูรณ์

https://resizeappicon.com/

หวังว่ามันจะช่วย

สิ่งนี้มีประโยชน์สำหรับผู้ที่ดิ้นรนหาเว็บไซต์ที่ดีกว่าเพื่อสร้างไอคอนและสแปลชสกรีน

• สร้างไอคอนแอป (มีประโยชน์สำหรับทั้ง android และ ios)
• เครื่องมือ APE (มีประโยชน์สำหรับทั้ง android และ ios)
• ผู้สร้างชุดไอคอน (มีประโยชน์สำหรับ ios เท่านั้น)
• Andoid Asset Studio (มีประโยชน์สำหรับ Android เท่านั้น + แนะนำ *)

หากคุณใช้งาน expo เพียงแค่วางไฟล์ขนาด 1024 x 1024 png ในโครงการของคุณและเพิ่มคุณสมบัติไอคอนลงใน app.json เช่น "icon": "./src/assets/icon.png"

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

ฉันอยากจะแนะนำให้ใช้ react-native-vector-icons เพื่อนำเข้าไอคอนไปยังโครงการของคุณ เมื่อคุณใช้ไอคอนแบบเวกเตอร์คุณไม่จำเป็นต้องกังวลมากเกี่ยวกับการปรับขนาดไอคอน ในขณะที่ใช้แพ็คเกจคุณสามารถใช้ชุดไอคอนยอดนิยมทั้งหมดเช่น fontawesome, ionicons เป็นต้น

นอกจากชุดไอคอนเหล่านี้คุณยังสามารถนำไอคอนของคุณเองไปยังโปรเจ็กต์ตอบโต้ภายในเครื่องของคุณโดยการบรรจุไอคอนของคุณเป็นไฟล์ tff และคุณสามารถนำเข้า ttf นั้นไปยังโปรเจ็กต์ android และ ios โดยตรง คุณสามารถใช้ไลบรารี react-native-vector-icons เดียวกันเพื่อจัดการไอคอนเหล่านั้น

นี่คือขั้นตอนโดยละเอียดในการตั้งค่าไอคอนที่กำหนดเอง

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'
    />
 );
}