বিক্রিয়া-নেটিভ দিয়ে কীভাবে একটি মোবাইল অ্যাপ তৈরি করবেন

প্রতিক্রিয়া নেটিভ হ'ল আইওএস এবং অ্যান্ড্রয়েডের জন্য স্থানীয়, স্থানীয়ভাবে রেন্ডার করা মোবাইল অ্যাপ্লিকেশন লেখার জন্য একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। প্রতিক্রিয়া নেটিভ প্ল্যাটফর্ম এপিআইয়ের জন্য জাভাস্ক্রিপ্ট ইন্টারফেসও সরবরাহ করে যাতে আপনার প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশনগুলি ফোন ক্যামেরা বা ব্যবহারকারীর অবস্থানের মতো প্ল্যাটফর্ম বৈশিষ্ট্যগুলিতে অ্যাক্সেস করতে পারে।

নেটিভ প্রতিক্রিয়া ইনস্টল করুন:

অন্য কেউ যখন এটি শিখতে আগ্রহী তখন আমি যে পদক্ষেপগুলি গ্রহণ করি তা লিখি। এখন আসুন কীভাবে প্রতিক্রিয়া নেটিভ ইনস্টল করবেন তা দেখুন।

রিএ্যাক্ট নেটিভের জন্য আমাদের নোড, ওয়াচম্যান, রিএ্যাক্ট নেটিভ সিএলআই এবং এক্সকোড দরকার। প্রহরী পরিবর্তন হ'ল পরিবর্তনগুলি পর্যবেক্ষণ এবং ক্রিয়াকলাপ ক্রিয়াকলাপগুলির জন্য একটি পরিষেবা when রিএ্যাকটিভ সিএলআই হ'ল রিএ্যাক্ট নেটিভের কমান্ড ইন্টারফেস। এক্সকোড একটি অ্যাপল আইডিই।

  1. নোড এবং প্রহরী নিযুক্ত করুন:

হোমড্রু দিয়ে নোড এবং প্রহরী স্থাপন করুন

মেশানো ইনস্টলেশন নোড
মিশ্রন অভিভাবক

2. ইনস্টল করুন প্রতিক্রিয়া নেটিভ সিএলআই

এটি আপনাকে আপনার প্রতিক্রিয়া নেটিভ ইনস্টল করতে সহায়তা করবে। আপনি ইতিমধ্যে প্রতিক্রিয়া নেটিভ ইনস্টল করা থাকলে, আপনি টিউটোরিয়াল দিয়ে চালিয়ে যেতে পারেন।

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

এনপিএম ইনস্টল -জি প্রতিক্রিয়া-নেটিভ-ক্লিপ

৩. এক্সকোড এবং এক্সকোড কমান্ড সরঞ্জাম ইনস্টল করুন

ম্যাক অ্যাপ স্টোর থেকে এক্সকোড ইনস্টল করুন।

আপনি এখন সম্পন্ন হয়েছে। আসুন আমাদের প্রথম অ্যাপ্লিকেশন শুরু করুন:

একটি প্রতিক্রিয়া নেটিভ প্রকল্প তৈরি করুন:

টার্মিনালে এই কমান্ডগুলি চালান:

নেটিভ নেটিভ আরম্ভিক প্রতিক্রিয়া

এখন আপনার পছন্দসই সম্পাদক দিয়ে প্রকল্পটি খুলুন। আমি ভিএসকোড ব্যবহার করছি।

প্রকল্প ফাইল

ভিএসকোডে টার্মিনাল টগল করতে ˆ Ctrl + Press টিপুন।

নেটিভ রান-আইওসের প্রতিক্রিয়া জানান
প্রথম রান

ফোল্ডার কাঠামো

ইনস্টলেশন সমাপ্ত হলে আপনার নিম্নলিখিত ফাইলগুলি থাকা উচিত:

শুরু করার জন্য, আমি কিছু ঘরের কাজ করার পরামর্শ দেব:

  • মূল ডিরেক্টরিতে "অ্যাপ" নামে একটি ফোল্ডার যুক্ত করুন
  • অ্যাপের মূল ডিরেক্টরিতে অ্যাপ.জেএস ফাইলটি সরান
  • ./App/app.js থেকে অ্যাপ্লিকেশন আমদানি করতে index.js থেকে আমদানির বিবরণ আপডেট করুন
  • অ্যাপটিতে ফোল্ডার তৈরি করুন

সম্পদ - এই ডিরেক্টরিতে আমাদের দুটি ফোল্ডার রয়েছে, চিত্র এবং অ্যানিমেশন।

উপাদান - এটি যেখানে আপনি সমস্ত ভাগ করা উপাদান রাখেন।

কনফিগার - এটি নিশ্চিত করতে আমরা একটি রং.জেএস ফাইলে আমাদের অ্যাপ্লিকেশনটির রঙিন স্কিম সেট আপ করেছি।

স্ক্রীন - এগুলি আমাদের প্রধান পর্দা।

স্ক্রিন

আমাদের অ্যাপে আমাদের পাঁচটি প্রধান পর্দা রয়েছে

  • বইয়ের তাক
  • এক্সপ্লোর করুন
  • বই যুক্ত করুন
  • তালিকা
  • প্রোফাইল

প্রথমত, স্থানধারীর পাঠ্য সহ যাদের মুছে ফেলা হয়:

নেভিগেশন

আমাদের এই পাঁচটি স্ক্রিন সেট আপ হয়ে গেলে, আমরা আমাদের নেভিগেশনের প্রথম অংশটি স্ক্রিনের নীচে ট্যাবড নেভিগেশন তৈরি করতে পারি। আমরা প্রতিক্রিয়া নেভিগেশন লাইব্রেরি ব্যবহার করব। আমরা আমাদের অ্যাপ ফোল্ডারের মূলটিতে একটি রাউটার.জেএস ফাইল যুক্ত করব এবং তারপরে কয়েকটি গ্রন্থাগার ইনস্টল করব:

প্রতিক্রিয়া নেভিগেশন ইনস্টল করুন

এনপিএম ইনস্টল রিঅ্যাক্ট-নেভিগেশন - সেভ করুন

1. প্রতিক্রিয়াশীল নেটিভ উপাদানগুলি ইনস্টল করুন

সুতাতে প্রতিক্রিয়াশীল উপাদান যুক্ত করুন বা এনপিএম i - প্রতিক্রিয়াশীল উপাদানগুলি সংরক্ষণ করুন

২. প্রতিক্রিয়াশীল নেটিভ ভেক্টর আইকনগুলি ইনস্টল করুন

সুতার প্রতিক্রিয়া নেটিভ-ভেক্টর-আইকন বা এনএমপি আই যুক্ত করুন - সাড়া-প্রতিক্রিয়া নেটিভ-ভেক্টর-আইকনগুলি

নেটিভ-নেটিভ-লিঙ্ক প্রতিক্রিয়া-নেটিভ-ভেক্টর-আইকনগুলি act

আপনাকে আর একটি জিনিস করতে হবে অ্যাপ.জেএস পরিবর্তন করা

আপনার দেখতে এমন কিছু হওয়া উচিত যা দেখতে দেখতে:

বই যুক্ত করুন

হাড়গুলি স্থানে থাকার পরে মজাদার অংশ শুরু হয়। একটি স্ট্যাটিক ডেটা অবজেক্ট বইয়ের একটি তালিকা তৈরি করতে ব্যবহৃত হয়। বুক শেলফের প্রাথমিক প্রদর্শনের জন্য আমাদের কেবল কয়েকটি ডেটা পয়েন্ট দরকার: আইডি, শিরোনাম, লেখক এবং থাম্বনেল।

এই উদ্দেশ্যে আমরা প্রতিক্রিয়া নেটিভের ফ্ল্যাটলিস্ট উপাদানটি ব্যবহার করি। এটি একটি দুর্দান্ত উপাদান যা পুনরুক্তকরণ এবং ডেটা দেখার জন্য বাক্সের ঠিক বাইরে কাজ করে। এর কারণ হ'ল প্রচুর ফাংশন অন্তর্নির্মিত, যেমন। খ। টানুন-রিফ্রেশ করুন, স্ক্রোল লোড করা ইত্যাদি

Bookcase.js ফাইলে আমরা নিম্নলিখিত কোডটি যুক্ত করি:

বুককেস.জেএস

এখানে আপনি বলতে পারেন যে আমাদের আরও একটি ফাইল যুক্ত করতে হবে: BookcaseItem.js, যা আমাদের _reেন্ডার আইটেম ফাংশন দ্বারা রেন্ডার করা হয়েছে। ফাইলটি দেখতে এমন দেখাচ্ছে:

বুককেসআইটেম.জেএস

এডিটবুক.জেএস

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

রাউটার.জেএস ফাইলে আপনি দুটি ক্রিয়েস্ট্যাকনাভিগেটর পাবেন যা তৈরি করা হয়েছে। আপনি ভাবতে পারেন স্ট্যাকনাভিগেটর কী করে? আপনি createBottomTabNavigator সম্পর্কে ভাবতে পারেন যেন পাঁচটি পোকার কার্ড এক টেবিলে একে অপরের পাশে অনুভূমিকভাবে স্থাপন করা হয়েছিল। আপনি যখন একটি ক্রিয়েস্ট্যাকনাভিগেটর যুক্ত করেন, আপনি প্রয়োজনীয়ভাবে সেই পাঁচটি কার্ডের একটিতে শীর্ষস্থান রেখে কার্ডটি গভীরতার সাথে যুক্ত করছেন।

রফতানির জন্য বুককেস্ট্যাক = ক্রিয়েস্ট্যাকনাভিগেটর ({
বইয়ের তাক: {
স্ক্রিন: বইয়ের কেস,
navigationOptions: ({নেভিগেশন}) => ({
ট্যাববারবেল: 'বুকশেল্ফ',
শিরোনাম: নাল,
}),
},
সম্পাদনাবুক: {
স্ক্রিন: এডিটবুক,
navigationOptions: ({নেভিগেশন}) => ({
ট্যাববারবেল: 'বই সম্পাদনা করুন',
শিরোনাম: নাল,
}),
},
});

এখন আমাদের কাছে একটি সহজ অ্যাপ্লিকেশন রয়েছে যা বইয়ের তালিকা করে। সম্পাদনা পৃষ্ঠাটি দেখতে এবং তালিকায় ফিরে আসতে আপনি এটিতে ক্লিক করতে পারেন। এটি বোঝার জন্য এটি একটি গুরুত্বপূর্ণ প্যাটার্ন কারণ এটি আমাদের এক্সপ্লোর এবং পড়া তালিকার বিভাগগুলির জন্য একই ব্যবহার করা হয় one

এটি কেবল শুরু, তবে আমরা অ্যাপটি সেট আপ করার প্রথম পদক্ষেপ নিয়েছি এবং আমরা এর কার্যকারিতাটি সত্যই প্রসারিত করতে প্রস্তুত। সাথে থাকুন এবং আমরা আপডেটগুলি পোস্ট করে এবং ধাপে ধাপে গাইড যুক্ত করব। কোনও পরামর্শ বা ভাবনা নিয়ে আমাকে আবার আঘাত করুন। আমরা প্রতিক্রিয়া প্রশংসা করি!

আপনি এখানে পুরো কোড খুঁজে পেতে পারেন।