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




react-native (8)

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

आईओएस प्रतीक

  • 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-*/ 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. राउंड आइकन जोड़ें: प्रत्येक mipmap फ़ोल्डर में, ic_launcher.png से ic_launcher.png फ़ाइल को जोड़ें, समान आकार के साथ ic_launcher_round.png नामक एक गोल संस्करण।

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

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

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

इंस्टॉल करें 

npm install --save react-native-elements

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

मैंने एक आइकन फ़ाइल से आपकी प्रतिक्रिया देशी ऐप के लिए स्वचालित रूप से आइकन जेनरेट करने के लिए एक जनरेटर लिखा: https://blog.bam.tech/developper-news/how-to-generate-your-react-native-app-icons-in-a-single-command-line ।

यह आपकी संपत्ति उत्पन्न करता है और यह आपके आईओएस और एंड्रॉइड प्रोजेक्ट में उन्हें सही ढंग से जोड़ता है।

इसे स्थापित करो

आपको node 6 स्थापित और image-magick ।

फिर generator साथ स्थापित करें 

npm install -g yo generator-rn-toolbox

इसका इस्तेमाल करें

कहीं पर तैयार एक एकल आइकन फ़ाइल है। आइकन 1024x1024 आकार का होना चाहिए।

फिर अपनी प्रतिक्रिया मूल परियोजना में, चलाएं: 

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

आपसे आपकी प्रतिक्रिया-मूल परियोजना का नाम पूछा जाएगा। उदाहरण के लिए, यदि आपने react-native init MyAwesomeProject साथ अपना प्रोजेक्ट बनाया है, तो आपके प्रोजेक्ट का नाम MyAwesomeProject ।

जब आपसे पूछा जाए, ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json? , वाई के साथ जवाब दें।

और बस!

आशा है कि यह दूसरों के लिए उपयोगी हो सकता है :)

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

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




icons   react-native