रिएक्टिव नेटिव - पर्यावरण सेटअप
रिएक्ट नेटिव के लिए वातावरण स्थापित करने के लिए आपको कुछ चीजों की आवश्यकता है। हम अपने निर्माण प्लेटफॉर्म के रूप में OSX का उपयोग करेंगे।
| अनु क्रमांक। | सॉफ्टवेयर | विवरण |
|---|---|---|
| 1 | NodeJS और NPM | NodeJS को स्थापित करने के लिए आप हमारे NodeJS पर्यावरण सेटअप ट्यूटोरियल का अनुसरण कर सकते हैं । |
चरण 1: बनाएँ-प्रतिक्रिया-मूल-एप्लिकेशन इंस्टॉल करें
अपने सिस्टम में सफलतापूर्वक NodeJS और NPM इंस्टॉल करने के बाद आप create-react-native-app (नीचे दिए गए अनुसार विश्व स्तर पर) की स्थापना के साथ आगे बढ़ सकते हैं।
C:\Users\Tutorialspoint> npm install -g create-react-native-appचरण 2: प्रोजेक्ट बनाएं
आवश्यक फ़ोल्डर के माध्यम से ब्राउज़ करें और नीचे दिखाए अनुसार एक नई प्रतिक्रिया देशी परियोजना बनाएं।
C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNativeउपरोक्त कमांड को निष्पादित करने के बाद, निर्दिष्ट सामग्री के साथ निर्दिष्ट नाम के साथ एक फ़ोल्डर बनाया जाता है।
चरण 3: NodeJS पायथन Jdk8
सुनिश्चित करें कि आपके पास आपके सिस्टम में Python NodeJS और jdk8 स्थापित हैं यदि नहीं, तो उन्हें स्थापित करें। इसके अतिरिक्त कुछ मुद्दों से बचने के लिए यार्न के नवीनतम संस्करण को स्थापित करने की सिफारिश की जाती है।
चरण 4: प्रतिक्रियाशील मूल निवासी CLI स्थापित करें
आप npm पर देशी कमांड लाइन इंटरफेस को स्थापित कर सकते हैं, नीचे दिखाए गए के रूप में स्थापित -g प्रतिक्रिया-देशी-क्ली कमांड का उपयोग कर सकते हैं।
npm install -g react-native-cli
चरण 5: देशी प्रतिक्रिया शुरू करें
प्रोजेक्ट फ़ोल्डर के माध्यम से स्थापना ब्राउज़ को सत्यापित करने के लिए और स्टार्ट कमांड का उपयोग करके प्रोजेक्ट शुरू करने का प्रयास करें।
C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm startअगर सब कुछ ठीक रहा तो आपको क्यूआर कोड मिलेगा जैसा कि नीचे दिखाया गया है।
जैसा कि निर्देश दिया गया है, अपने एंड्रॉइड डेविस पर देशी ऐप्स को प्रतिक्रिया देने का एक तरीका एक्सपो का उपयोग करना है। अपने एंड्रॉइड डेविस में एक्सपो क्लाइंट स्थापित करें और उपरोक्त प्राप्त क्यूआर कोड को स्कैन करें।
चरण 6: परियोजना को बाहर निकालें
यदि आप एंड्रॉइड स्टूडियो का उपयोग करके एंड्रॉइड एमुलेटर चलाना चाहते हैं, तो वर्तमान कमांड लाइन से बाहर आकर दबाएं ctrl+c।
फिर, रन निष्पादित करें eject command जैसा
npm run ejectयह आपको विकल्प को बेदखल करने का संकेत देता है, तीर का उपयोग करके पहले एक का चयन करें और एंटर दबाएं।
फिर, आपको होम स्क्रीन पर ऐप का नाम और एंड्रॉइड स्टूडियो और एक्सकोड प्रोजेक्ट के प्रोजेक्ट का नाम सुझाना चाहिए।
हालाँकि आपकी परियोजना सफलतापूर्वक समाप्त हो गई, लेकिन आपको एक त्रुटि मिल सकती है -
इस त्रुटि को अनदेखा करें और निम्न आदेश का उपयोग करके Android के लिए मूल निवासी प्रतिक्रिया को चलाएं -
react-native run-androidलेकिन, इससे पहले आपको एंड्रॉइड स्टूडियो स्थापित करने की आवश्यकता है।
चरण 7: Android स्टूडियो स्थापित करना
वेब पेज पर जाएँ https://developer.android.com/studio/ और एंड्रॉयड स्टूडियो डाउनलोड करें।
इसकी स्थापना फ़ाइल डाउनलोड करने के बाद, इस पर डबल क्लिक करें और स्थापना के साथ आगे बढ़ें।
चरण 8: AVD प्रबंधक को कॉन्फ़िगर करना
AVD प्रबंधक को कॉन्फ़िगर करने के लिए मेनू बार में संबंधित आइकन पर क्लिक करें।
चरण 9: AVD प्रबंधक को कॉन्फ़िगर करना
डिवाइस की परिभाषा चुनें, Nexus 5X सुझाव देने योग्य है।
नेक्स्ट बटन पर क्लिक करें आपको एक सिस्टम इमेज विंडो दिखाई देगी। को चुनिएx86 Images टैब।
फिर, मार्शमैलो चुनें और अगले पर क्लिक करें।
अंत में, AVD कॉन्फ़िगरेशन को पूरा करने के लिए फिनिश बटन पर क्लिक करें।
अपने वर्चुअल डिवाइस को कॉन्फ़िगर करने के बाद अपने एंड्रॉइड एमुलेटर को शुरू करने के लिए ऐक्शन कॉलम के तहत प्ले बटन पर क्लिक करें।
चरण 10: Android चल रहा है
कमांड प्रॉम्प्ट खोलें, अपने प्रोजेक्ट फ़ोल्डर के माध्यम से ब्राउज़ करें और, निष्पादित करें react-native run-android आदेश।
फिर, आपका ऐप निष्पादन एक और प्रॉम्प्ट में शुरू होता है, आप इसकी स्थिति देख सकते हैं।
अपने एंड्रॉइड एमुलेटर में आप डिफ़ॉल्ट ऐप का निष्पादन देख सकते हैं -
चरण 11: स्थानीय
को खोलो android आपके प्रोजेक्ट फ़ोल्डर में फ़ोल्डर SampleReactNative/android(इस मामले में)। नाम से एक फ़ाइल बनाएँlocal.properties और इसमें निम्न पथ जोड़ें।
sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdkयहाँ, बदलें Tutorialspoint आपके उपयोगकर्ता नाम के साथ।
चरण 12: गर्म रीलोडिंग
और एप्लिकेशन को बनाने के लिए App.js को संशोधित करें और परिवर्तनों को स्वचालित रूप से एंड्रॉइड एमुलेटर पर अपडेट किया जाएगा।
यदि नहीं, तो एंड्रॉइड एमुलेटर प्रेस पर क्लिक करें ctrl+m फिर, चयन करें Enable Hot Reloading विकल्प।
