रीऐक्टिव नेटिव ऐप में आइकन कैसे जोड़ें

Question

मैं एक रिएक्टिव नेटिव ऐप बना रहा हूं। मैं ऐप आइकन को कस्टमाइज़ करना चाहता हूं (मतलब वह आइकन जिसे आप ऐप शुरू करने के लिए क्लिक करते हैं)। मैंने इसे Googled किया है, लेकिन मैं विभिन्न प्रकार के आइकन ढूंढता रहता हूं जो विभिन्न चीजों को संदर्भित करते हैं। मैं ऐप में इस प्रकार के आइकन कैसे जोड़ूं?

Comments

क्या यह iOS, Android या दोनों के लिए है?

— rmevans9

अब ios के लिए लेकिन अंततः दोनों के लिए

— एडम काटज़

इस उत्तर को भी देखें: stackoverflow.com/a/11845815/5576491

— पल्लवबक्षी

Answer 1

आईओएस प्रतीक

• सेट AppIconमें Images.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.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 Android

प्रतिक्रिया देशी के नवीनतम संस्करण भी गोल आइकन का समर्थन करते हैं। इस विशेष मामले के लिए, आपके पास दो विकल्प हैं:

A. राउंड आइकन जोड़ें: प्रत्येक मिपमैप फ़ोल्डर में, ic_launcher.pngफ़ाइल के ic_launcher_round.pngसाथ एक गोल संस्करण भी जोड़ें, जो समान आकार के साथ कहा जाता है ।

B. राउंड आइकन हटाएं: अंदर yourProjectFolder/android/app/src/main/AndroidManifest.xmlलाइन को हटाएं android:roundIcon="@mipmap/ic_launcher_round"और इसे सहेजें।

अन्य देखें कि बिल्ड एक त्रुटि फेंकता है।

Comments

@ adam-katz, यह वास्तव में स्वीकृत उत्तर होना चाहिए।

— जेसन वीनर

प्रतिक्रिया-मूल में सीधे दोनों के लिए बनाने के लिए किसी भी तरह से मौजूद हैं?

— jose920405

बस इस बेहतरीन जवाब को अपडेट करने के लिए। अब आपको iOS पर iPadPro के लिए 83.5pt * 2 की भी आवश्यकता है।

— रैंडी कूलमैन

मैंने एक आइकन फ़ाइल से आपकी प्रतिक्रिया देशी ऐप के लिए स्वचालित रूप से आइकन जेनरेट करने के लिए एक जनरेटर लिखा है :) उम्मीद है कि यह दूसरों की मदद कर सकता है! ( इस उत्तर को देखें )

— अल्मूरो

यह मूल निवासी प्रलेखन में कहां है?

— गोनैले

Answer 2

मैंने एक आइकन फ़ाइल से आपकी प्रतिक्रिया देशी ऐप के लिए स्वचालित रूप से आइकन उत्पन्न करने के लिए एक जनरेटर लिखा था । यह आपकी संपत्ति उत्पन्न करता है और यह उन्हें आपके आईओएस और एंड्रॉइड प्रोजेक्ट में सही ढंग से जोड़ता है:

अपडेट (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 आधार छवि
• आईओएस के लिए कोई पारदर्शी पृष्ठभूमि नहीं
• एक आइकन जो एंड्रॉइड के लिए अनुकूली आइकन दिशानिर्देशों का पालन करता है

यहां पिछले टूल पर कुछ सुधार किए गए हैं: the

• नहीं येमन निर्भरता, अब यह एक प्रतिक्रिया-देशी-क्ली प्लगइन है
• कोई छवि मैजिक निर्भरता नहीं
• Android के लिए अनुकूली आइकन बनाता है
• आईओएस के लिए लापता आइकन आकार जोड़ता है

Comments

यह स्वीकृत उत्तर होना चाहिए। आप मुझे समय की बड़ी राशि बचाओ! ऐप डेवलपर्स के रूप में हमें वास्तव में परवाह नहीं है कि 9 आइकन और 4 आइकन के लिए आईओएस और एंड्रॉइड को कितने आइकन की आवश्यकता है, सभी में समान सामग्री है, कौन परवाह करता है? रेटिना के लिए या रेटिना के लिए नहीं, बड़ी या छोटी स्क्रीन के लिए, कौन परवाह करता है? बस मुझे बिल्कुल स्पष्ट और समान आइकन दें, बस! धन्यवाद और मैं आपके अन्य उपकरणों की कोशिश करना चाहूंगा। :)

— झांग बज़

मुझे समस्या मिली: छवि-मैजिक स्थापित करते समय, विरासत उपकरण स्थापित करना सुनिश्चित करें ताकि convertकमांड मौजूद हो।

— रिक लव

@RickLove मैं भी इस मुद्दे के साथ imagemagick स्थापित करने के बाद किया था yarn -g add imagemagick। मैंने homebrewइसके बजाय इसका उपयोग करते हुए इसे स्थापित किया ( brew install imagemagick) जो आवश्यक था और काम किया।

— बेनीमिनो बैग्सिन

@PolaEdward रूबी की कोई आवश्यकता नहीं है :) सभी आवश्यकताएं यहाँ हैं: github.com/bamlab/generator-rn-toolbox/blob/master/generators/…

— Almouro

इसने बहुत मदद की, लेकिन क्या राउंड आइकन भी जोड़ना है? ये लाइब्रेरी केवल एंड्रॉइड के लिए सामान्य आइकन जोड़ती है। धन्यवाद फिर से

— Amas

Answer 3

मैं आइकन को सही ढंग से स्केल करने के लिए एक सेवा का उपयोग करूंगा। http://makeappicon.com/ अच्छा लगता है। बड़े आकार पर एक छवि का उपयोग करें क्योंकि छोटी छवि को स्केल करने से बड़े आइकन पिक्सेल किए जा सकते हैं। वह साइट आपको iOS और Android दोनों के लिए आकार देगी।

वहां से आप जैसे आइकन को सेट करने की बात होती है, आप एक नियमित रूप से मूल ऐप होगा।

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

Android एप्लिकेशन के लिए आइकन सेट करें

Comments

Apple लिंक टूटा है, @ rmevans9 :(

— एडम के डीन

ध्यान दें कि यह सेवा आपके बारे में जानकारी एकत्र करती है - जैसे कि ऐप का नाम, ऐप की बाज़ार श्रेणी, आदि - और छवि डाउनलोड को रोकता है जब तक कि एक ईमेल पता प्रदान नहीं किया जाता है।

— tfmontague

मैंने यह उत्तर पढ़ा है, और कुछ समय बाद ही नीचे अल्मोरो का उत्तर पढ़ा। काश, मैंने अल्मोरो के जवाब के साथ शुरुआत की।

— योसी

Answer 4

मैं इस लड़के की सलाह का पालन करके और एंड्रॉइड एसेट स्टूडियो का उपयोग करके अपनी प्रतिक्रिया-मूल एंड्रॉइड परियोजना में एक ऐप आइकन जोड़ने में सक्षम था

यहाँ यह है, यदि लिंक मृत हो जाता है:

React-Native Android में एप्लिकेशन आइकन कैसे अपलोड करें

1) एंड्रॉइड एसेट स्टूडियो में अपनी छवि अपलोड करें । जो भी प्रभाव आप लागू करना चाहते हैं, उसे चुनें। उपकरण आपके लिए एक ज़िप फ़ाइल बनाता है। डाउनलोड .Zip पर क्लिक करें।

2) अपनी मशीन पर फ़ाइल खोलना। फिर उन छवियों पर खींचें जिन्हें आप अपने /android/app/src/main/res/फ़ोल्डर में चाहते हैं । प्रत्येक छवि को सही सबफ़ोल्डर में रखना सुनिश्चित करेंmipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3) मत करो (जैसा कि मैंने मूल रूप से किया था) अपने रेज फ़ोल्डर पर पूरे फ़ोल्डर को खींचें और छोड़ें। जैसा कि आप अपनी /res/values/{strings,styles}.xmlफ़ाइलों को पूरी तरह से हटा सकते हैं।

Answer 5

किसी ने इस कार्य के लिए टूल का उपयोग करना बहुत आसान बना दिया: https://www.npmjs.com/package/app-icon

यह सरल उपकरण आपको अपनी प्रतिक्रिया-मूल परियोजना में एक आइकन बनाने की अनुमति देता है, फिर उसमें से सभी आवश्यक आकारों के आइकन बनाएं। यह वर्तमान में iOS और Android के लिए काम करता है।

मैंने इसका इस्तेमाल किया है। 512x512 पीएनजी बनाया और फिर उस उपकरण और बूम को चलाया, किया। सुपर आसान है।

Comments

पुनश्च: प्रतिक्रिया-मूल-चिह्न को पदावनत के रूप में चिह्नित किया गया है और इसे ऐप-आइकन का नाम दिया गया है; npmjs.com/package/app-icon

— Eirik H

Answer 6

यहाँ थोड़ी देर से आ रहा है लेकिन Android Studio के पास बहुत ही आसान आइकन एसेट विजार्ड है। इसका बहुत ही आत्म व्याख्यात्मक लेकिन कुछ आसान प्रभाव है और इसके सही में बनाया गया है:

Comments

क्या आप Android स्टूडियो में अपनी आयत-मूल परियोजनाएँ बनाते हैं?

— एडम काटज़

नहीं, लेकिन मुझे नियमित रूप से किसी न किसी कारण से इसे खोलना पड़ता है। XCode के साथ भी - आखिरकार आपको दूसरी तरफ जाने की जरूरत है। यह वह विधि है जिसका उपयोग मैं सेकंड में उच्च गुणवत्ता के आइकन सेट उत्पन्न करने के लिए करता हूं, बहुत आश्चर्यचकित हूं कि इसे इतनी मजबूत प्रतिक्रिया मिली है। नरक - मैं अपने खुद के ओपन सोर्स प्रोजेक्ट का मालिक हूं, जो मोबाइल ऐप्स के लिए आइकन तैयार करता है और मैं अभी भी इस पद्धति को पसंद करता हूं। npmjs.com/package/cordova-media-generator

— Ryan

यह बहुत बढ़िया था - इसने उन आइकनों को भी पूर्वनिर्मित कर दिया, जो मुझे सुपर मददगार लगीं (जैसे यह उत्तर!)।

— बिलाल अकिल

प्रतिभाशाली! अच्छा है!

— बैरीलाचपेले

Answer 7

आपको आईओएस और एंड्रॉइड के लिए अलग-अलग आकार के आइकन की आवश्यकता होगी, जैसे रॉकविक ने कहा। इसके अलावा, मैं इस साइट को विभिन्न आकार के आइकनों के निर्माण के लिए सलाह देता हूं यदि कोई दिलचस्पी रखता है। आपको कुछ भी डाउनलोड करने की आवश्यकता नहीं है और यह पूरी तरह से काम करता है।

https://resizeappicon.com/

आशा करता हूँ की ये काम करेगा।

Answer 8

यह आइकन और स्प्लैशस्क्रीन उत्पन्न करने के लिए बेहतर साइट खोजने के लिए संघर्ष कर रहे लोगों के लिए मददगार है

• ऐप आइकन बनाएं (Android और ios दोनों के लिए उपयोगी)
• APE उपकरण (Android और ios दोनों के लिए उपयोगी)
• आइकन सेट निर्माता (केवल आईओएस के लिए उपयोगी)
• एंड्राइड एसेट स्टूडियो (केवल Android के लिए उपयोगी + अनुशंसित *)

Answer 9

यदि आप एक्सपो का उपयोग कर रहे हैं, तो अपने प्रोजेक्ट में एक 1024 x 1024 पीएनजी फ़ाइल रखें और अपने ऐप में एक आइकॉन प्रॉपर्टी जोड़ें। "आइकॉन": "./src/assets/icon.png"

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

Answer 10

मैं आपकी परियोजना के लिए प्रतीक आयात करने के लिए प्रतिक्रिया-देशी-वेक्टर-आइकन का उपयोग करने का सुझाव देना चाहूंगा। जैसा कि आप वेक्टर आइकन का उपयोग करते हैं, आपको आइकन स्केलिंग पक्ष पर ज्यादा चिंता करने की आवश्यकता नहीं है। पैकेज का उपयोग करते समय आप सभी लोकप्रिय आइकन सेट का उपयोग करने में सक्षम होते हैं जैसे कि फॉन्टव्यू, आयनिकॉन्स आदि।

इन आइकॉनसेट्स के अलावा आप अपने आइकनों को भी अपनी प्रतिक्रिया-देशी परियोजना में ले जा सकते हैं, अपने आइकनों को ttf फ़ाइल के रूप में पैक करके और आप उस ttf को सीधे android और ios प्रोजेक्ट दोनों में आयात कर सकते हैं। आप उन आइकनों को प्रबंधित करने के लिए समान प्रतिक्रिया-मूल-वेक्टर-आइकन लाइब्रेरी का उपयोग कर सकते हैं

यहाँ कस्टम आइकन सेटअप करने के लिए एक विस्तृत प्रक्रिया है

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

Answer 11

आप प्रतिक्रिया-मूल-तत्वों को आयात कर सकते हैं और अपनी प्रतिक्रिया मूल ऐप के लिए फ़ॉन्ट-भयानक आइकन का उपयोग कर सकते हैं

इंस्टॉल

npm install --save react-native-elements

फिर आयात करें कि आप माउस का उपयोग कहां करना चाहते हैं

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

इसका उपयोग करें

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

Comments

हम एंड्रॉइड के लिए आइकन कैसे जोड़ सकते हैं, क्योंकि हम नाम को निर्दिष्ट करते हैं ios-american-football? या हम इस वाक्यविन्यास में Android द्वारा ios को बदल सकते हैं?

— गणेशदेशमुख १०'१

यह मूल प्रश्न को संबोधित नहीं करता है।

— सोल्यूएबलनॉनगॉन

पोस्ट लॉन्चर आइकन के बारे में है और इसका प्रतिक्रिया-मूल-तत्वों से कोई लेना-देना नहीं है। लाइब्रेरी सिर्फ इन-ऐप आइकन के लिए है।

— सेलेस्टियल