নেটিভ অ্যাপ্লিকেশনটিতে কীভাবে আইকন যুক্ত করবেন

Question

আমি একটি প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশন তৈরি করছি। আমি অ্যাপ্লিকেশন আইকনটি কাস্টমাইজ করতে চাই (অ্যাপটি শুরু করার জন্য আপনি যে আইকনটিতে ক্লিক করেছেন)। আমি এটি গুগল করেছি তবে আমি বিভিন্ন ধরণের আইকন খুঁজে পাই যা বিভিন্ন জিনিসকে বোঝায়। আমি এই ধরণের আইকনগুলিকে অ্যাপে কীভাবে যুক্ত করব?

Comments

এটি কি আইওএস, অ্যান্ড্রয়েড বা উভয়ের জন্য?

— rmevans9

এখন আইওএসের জন্য তবে শেষ পর্যন্ত উভয়ের জন্যই

— অ্যাডাম কাটজ

: পাশাপাশি এই উত্তরটি দেখুন stackoverflow.com/a/11845815/5576491

— PallavBakshi

Answer 1

আইওএস আইকন

• সেট 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 অ্যান্ড্রয়েড আপডেট করুন

প্রতিক্রিয়া নেটিভের সর্বশেষতম সংস্করণগুলি রাউন্ড আইকনকে সমর্থন করে। এই বিশেষ ক্ষেত্রে আপনার দুটি পছন্দ আছে:

উ: গোলাকার আইকন যুক্ত করুন: প্রতিটি মিপম্যাপ ফোল্ডারে, একই আকারে ic_launcher.pngডাকা একটি বৃত্তাকার সংস্করণও যুক্ত করুন toic_launcher_round.png

বি। বৃত্তাকার আইকনগুলি সরান: ভিতরে yourProjectFolder/android/app/src/main/AndroidManifest.xmlলাইনটি সরিয়ে এটি android:roundIcon="@mipmap/ic_launcher_round"সংরক্ষণ করুন।

বিল্ড যা ত্রুটি ছুড়ে ফেলে।

Comments

@ অ্যাডাম-কাটজ, এটি সত্যই গ্রহণযোগ্য উত্তর হওয়া উচিত।

— জেসন উইনার

সরাসরি প্রতিক্রিয়া নেটিভ উভয় জন্য কোনও উপায় অস্তিত্ব আছে?

— jose920405

শুধু এই দুর্দান্ত উত্তর আপডেট করতে। আইওএসে আইপ্যাডপ্রোর জন্য আপনার এখন 83.5pt * 2 প্রয়োজন।

— রেন্ডি কুলম্যান

আমি একটি জেনারেটর লিখেছিলাম একটি একক আইকন ফাইল থেকে আপনার প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশনটির জন্য স্বয়ংক্রিয়ভাবে আইকনগুলি তৈরি করতে :) আশা করি এটি অন্যকে সহায়তা করতে পারে! ( এই উত্তরটি দেখুন )

— আলমোরো

দেশীয় নথিভুক্তিতে এটি কোথায়?

— GONeale

Answer 2

আমি একটি জেনারেটর লিখেছিলাম একটি একক আইকন ফাইল থেকে আপনার প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশানের জন্য স্বয়ংক্রিয়ভাবে আইকনগুলি তৈরি করতে । এটি আপনার সম্পদ উত্পন্ন করে এবং এটি আপনার আইওএস এবং অ্যান্ড্রয়েড প্রকল্পে এগুলি সঠিকভাবে যুক্ত করে:

আপডেট (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 বেস ইমেজ
• আইওএসের জন্য স্বচ্ছ পটভূমি নেই
• একটি আইকন যা অ্যান্ড্রয়েডের জন্য অভিযোজিত আইকন নির্দেশিকা অনুসরণ করে

পূর্ববর্তী সরঞ্জামটির তুলনায় এখানে কিছু উন্নতি দেওয়া হয়েছে: 🥳

• ইয়েমেন নির্ভরতা নেই, এটি এখন একটি রিএ্যাক্ট-নেটিভ-ক্লাইম প্লাগইন
• কোনও চিত্রের ম্যাজিক নির্ভরতা নেই
• অ্যান্ড্রয়েডের জন্য অভিযোজিত আইকন তৈরি করে
• আইওএসের জন্য হারিয়ে যাওয়া আইকনগুলির আকার যুক্ত করে

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। আপনি আমাকে বিপুল পরিমাণ বাঁচান! অ্যাপ্লিকেশন বিকাশকারী হিসাবে আমরা সত্যিই আইওএস এবং অ্যান্ড্রয়েডের কতগুলি আইকন প্রয়োজন তা যত্নশীল করি না, 9 আইকন এবং 4 আইকনগুলির জন্য একই বিষয়বস্তু রয়েছে, কে যত্নশীল? রেটিনার জন্য বা না রেটিনা, বড় বা ছোট পর্দার জন্য, কে চিন্তা করে? আমাকে ঠিক স্পষ্ট এবং একই আইকন দিন, এটাই! আপনাকে ধন্যবাদ এবং আমি আপনার অন্যান্য সরঞ্জাম চেষ্টা করতে চাই। :)

— ঝাং

আমি সমস্যাটি পেয়েছি: চিত্র-ম্যাজিক ইনস্টল করার সময়, উত্তরাধিকার সরঞ্জামগুলি ইনস্টল করার বিষয়টি নিশ্চিত করুন যাতে convertকমান্ডটি উপস্থিত থাকে।

— রিক লাভ

@ রিকলভের সাথে ইমেজম্যাগ ইনস্টল করার পরে আমারও এই সমস্যা হয়েছিল yarn -g add imagemagick। আমি তার homebrewপরিবর্তে এটি ইনস্টল করেছিলাম ( brew install imagemagick) যা প্রয়োজনীয় সবকিছু এবং কাজ করে ইনস্টল করে।

— বেনিয়ামিনোব্যাগিনস

@ পোলাএডওয়ার্ড রুবীর দরকার নেই :) সমস্ত প্রয়োজনীয়তা এখানে রয়েছে: github.com/bamlab/generator-rn-toolbox/blob/master/generators/…

— আলমোরো

এটি অনেক সাহায্য করেছে, তবে রাউন্ড আইকনগুলিও যুক্ত করার উপায় আছে কি? এই লাইব্রেরিটি কেবল অ্যান্ড্রয়েডের জন্য সাধারণ আইকন যুক্ত করে। আপনাকে আবারও ধন্যবাদ

— আমাস

Answer 3

আইকনটি সঠিকভাবে স্কেল করতে আমি কোনও পরিষেবা ব্যবহার করব। http://makeappicon.com/ ভাল লাগছে। একটি বৃহত্তর আকারে একটি চিত্র ব্যবহার করুন কারণ একটি ছোট চিত্রকে স্কেলিং করা বড় আইকনগুলিকে পিক্সেলিটেড হতে পারে। সেই সাইটটি আপনাকে আইওএস এবং অ্যান্ড্রয়েড উভয়ের জন্য আকার দেবে।

সেখান থেকে আইকনটি সেট করার বিষয়টি আপনার মতো একটি নিয়মিত নেটিভ অ্যাপ্লিকেশন।

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

অ্যান্ড্রয়েড অ্যাপ্লিকেশন জন্য আইকন সেট করুন

Comments

অ্যাপল লিঙ্কটি নষ্ট হয়েছে, @ rmevans9। :(

— আদম কে ডিন

নোট করুন যে এই পরিষেবাটি আপনার সম্পর্কে তথ্য সংগ্রহ করে - যেমন অ্যাপ্লিকেশনটির নাম, অ্যাপ্লিকেশনটির বাজার বিভাগ ইত্যাদি - এবং কোনও ইমেল ঠিকানা সরবরাহ না করা হলে চিত্র ডাউনলোডে বাধা দেয়।

— tfmontague

আমি এই উত্তরটি পড়েছি এবং কিছুক্ষণ পরে নীচে আলমৌরোর উত্তরটি পড়েছি। আমি আশা করি আমি আলামুরোর উত্তর দিয়ে শুরু করেছি।

— ইয়াসি

Answer 4

এই লোকটির পরামর্শ অনুসরণ করে এবং অ্যান্ড্রয়েড অ্যাসেট স্টুডিও ব্যবহার করে আমি আমার প্রতিক্রিয়াভিত্তিক অ্যান্ড্রয়েড প্রকল্পে একটি অ্যাপ্লিকেশন আইকন যুক্ত করতে সক্ষম হয়েছি

লিঙ্কটি মারা যাওয়ার ক্ষেত্রে প্রতিলিপিটি এখানে রয়েছে:

বিক্রিয়া-নেটিভ অ্যান্ড্রয়েডে কীভাবে অ্যাপ্লিকেশন আইকন আপলোড করবেন

1) আপনার চিত্র অ্যান্ড্রয়েড অ্যাসেট স্টুডিওতে আপলোড করুন । আপনি প্রয়োগ করতে চান যাই হোক না কেন প্রভাব নিন। সরঞ্জামটি আপনার জন্য একটি জিপ ফাইল তৈরি করে। ডাউনলোড করুন। জিপ ক্লিক করুন।

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

এই সাধারণ সরঞ্জামটি আপনাকে আপনার প্রতিক্রিয়া-নেটিভ প্রকল্পে একটি একক আইকন তৈরি করতে দেয়, তারপরে এটি থেকে সমস্ত প্রয়োজনীয় আকারের আইকন তৈরি করতে পারে। এটি বর্তমানে আইওএস এবং অ্যান্ড্রয়েডের জন্য কাজ করে।

আমি এটি ব্যবহার করেছি। একটি 512x512 পিএনজি তৈরি করুন এবং তারপরে সেই সরঞ্জামটি চালিয়ে যান এবং শেষ করুন। খুব সহজ।

Comments

পিএস: রিএ্যাক্ট-নেটিভ-আইকনটিকে অবচয় হিসাবে চিহ্নিত করা হয়েছে এবং অ্যাপ-আইকনটিতে নতুন নামকরণ করা হয়েছে; npmjs.com/package/app-icon

— এইচ

Answer 6

এখানে কিছুটা দেরি করে আসছেন তবে অ্যান্ড্রয়েড স্টুডিওতে একটি খুব সহজ আইকন সম্পদ উইজার্ড রয়েছে। এর খুব স্ব-বর্ণনামূলক তবে এর কয়েকটি কার্যকর প্রভাব রয়েছে এবং এটি এর মধ্যে নির্মিত:

Comments

আপনি কি অ্যান্ড্রয়েড স্টুডিওতে আপনার আয়ত-নেটিভ প্রকল্পগুলি তৈরি করেন?

— অ্যাডাম কাটজ

না, তবে আমাকে নিয়মিত কোনও কারণে বা অন্য কোনও কারণে এটি খুলতে হবে। এক্সকোডের সাথে একই - অবশেষে আপনাকে অন্য পাশ দিয়ে যেতে হবে। আমি সেকেন্ডে উচ্চমানের আইকন সেটগুলি তৈরি করতে এই পদ্ধতিটি ব্যবহার করি, খুব অবাক হয়ে যায় যে এর এত জোরালো সাড়া পড়েছে। নরক - এমনকি মোবাইল অ্যাপ্লিকেশনগুলির জন্য আইকন উত্পন্ন করতে আমি আমার নিজের ওপেন সোর্স প্রকল্পের মালিক এবং এখনও আমি এই পদ্ধতিটি পছন্দ করি। npmjs.com/package/cordova-media-generator

— রায়ান Knell

এটি দুর্দান্ত ছিল - এটি আইকনগুলিও পূর্বরূপযুক্ত করেছিল, যা আমি অত্যন্ত সহায়ক বলে খুঁজে পেয়েছি (এই উত্তরটির মতো!)।

— বিলাল আকিল

উজ্জ্বল! সুন্দর!

— ব্যারিলাচাপেল

Answer 7

আইওএস এবং অ্যান্ড্রয়েডের জন্য আপনার বিভিন্ন আকারের আইকন প্রয়োজন হবে, যেমন রকভিক বলেছিলেন। তদ্ব্যতীত, কারও আগ্রহী হলে আমি বিভিন্ন আকারের আইকন উত্পন্ন করার জন্য এই সাইটটি সুপারিশ করছি। আপনার কিছু ডাউনলোড করার দরকার নেই এবং এটি পুরোপুরি কার্যকর হয়।

https://resizeappicon.com/

আশা করি এটা সাহায্য করবে.

Answer 8

আইকন এবং স্প্ল্যাশস্ক্রিন উত্পন্ন করার জন্য আরও ভাল সাইট খুঁজে পেতে লড়াই করা লোকদের পক্ষে এটি সহায়ক

• অ্যাপ্লিকেশন আইকনটি তৈরি করুন (অ্যান্ড্রয়েড এবং আইওএস উভয়ের জন্য দরকারী)
• এপিই সরঞ্জাম (অ্যান্ড্রয়েড এবং আইওএস উভয়ের জন্য দরকারী)
• আইকন সেট নির্মাতা (শুধুমাত্র আইওএসের জন্য দরকারী)
• অ্যান্ডয়েড অ্যাসেট স্টুডিও (কেবলমাত্র অ্যান্ড্রয়েডের জন্য দরকারী + প্রস্তাবিত *)

Answer 9

আপনি যদি এক্সপো ব্যবহার করছেন তবে আপনার প্রকল্পে একটি 1024 x 1024 পিএনজি ফাইল রাখুন এবং আপনার অ্যাপ্লিকেশনটিতে একটি আইকন সম্পত্তি যুক্ত করুন "আইকন": "./src/assets/icon.png"

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

Answer 10

আমি আপনার প্রকল্পে আইকনগুলি আমদানি করতে প্রতিক্রিয়া-নেটিভ-ভেক্টর-আইকনগুলি ব্যবহার করার পরামর্শ দিতে চাই। আপনি ভেক্টর আইকনগুলি ব্যবহার করার সময়, আইকন স্কেলিংয়ের দিক থেকে আপনার খুব বেশি চিন্তা করার দরকার নেই। প্যাকেজটি ব্যবহার করার সময় আপনি সমস্ত জনপ্রিয় আইকন সেট যেমন ফন্টউইউজস, আয়নিকনস ইত্যাদি ব্যবহার করতে পারবেন ..

এই আইকনসেটগুলি ছাড়াও আপনি নিজের আইকনগুলিকে টিটিএফ ফাইল হিসাবে প্যাক করে আপনার প্রতিক্রিয়া-দেশীয় প্রকল্পেও আনতে পারেন এবং আপনি এই টিটিএফ সরাসরি অ্যান্ড্রয়েড এবং আইওএস প্রকল্প উভয়ই আমদানি করতে পারেন। আপনি এই আইকনগুলি পরিচালনা করতে একই প্রতিক্রিয়া-নেটিভ-ভেক্টর-আইকন লাইব্রেরিটি ব্যবহার করতে পারেন

কাস্টম আইকন সেটআপ করার জন্য এখানে একটি বিশদ পদ্ধতি রয়েছে

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? বা আমরা কি এই সিনট্যাক্সে আইওডগুলি অ্যান্ড্রয়েড দ্বারা প্রতিস্থাপন করতে পারি?

— গণেশদেশমুখ

এটি মূল প্রশ্নের সমাধান করে না।

— সমাধানযোগ্য নোনাগন

পোস্টটি লঞ্চার আইকন সম্পর্কে এবং প্রতিক্রিয়া-নেটিভ-উপাদানগুলির সাথে কিছুই করার নেই। লাইব্রেরিটি কেবলমাত্র অ্যাপ্লিকেশন আইকনগুলির জন্য।

— আকাশচুম্বী