प्रतिक्रिया मूल पर एक मोबाइल एप्लिकेशन बनाना

सभी को नमस्कार। यह हमारे मोबाइल एप्लिकेशन को बनाने में पहला भाग होगा।

हम प्रतिक्रिया देशी और एक्सपो का उपयोग करके एक मोबाइल एप्लिकेशन करेंगे। हम एक महान समाचार एप्लिकेशन नहीं बनाएंगे। इसके लिए हम बाकी एपीआई के माध्यम से php का उपयोग करेंगे।

हमारे आवेदन में, हम उन लेखों को प्रदर्शित करेंगे जो phpmyadmin में होंगे।

एक्सपो क्या है?

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

एक्सपो इंस्टालेशन

एक्सपो स्थापित करने से पहले, सुनिश्चित करें कि आप npm स्थापित करें।

npm install expo-cli —global 

IPhone पर एक्सपो स्थापित करें

Android पर एक्सपो स्थापित करें


एक्सपो आपको विकल्प देता है। आप अपने मोबाइल डिवाइस पर एक्सपो क्लाइंट एप्लिकेशन के माध्यम से या अपने कंप्यूटर पर iOS / Android सिम्युलेटर का उपयोग करके अपने एप्लिकेशन का पूर्वावलोकन कर सकते हैं। एप्लिकेशन बनाते समय, मैंने Android पर एक्सपो का उपयोग किया।

एक एक्सपो एप्लिकेशन बनाना

 epxo init 

एक्सपो स्थापित करने के बाद, एक्सपो सीएलआई इंटरफ़ेस खुलता है और आपको प्रोजेक्ट नाम और टेम्पलेट का चयन करने की अनुमति देता है। हम एक रिक्त पृष्ठ चुनेंगे।

 cd newsApp expo start —tunnel 

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

अपने कंप्यूटर पर एक्सपो में प्रवेश करने के लिए इस कमांड का उपयोग करें:

 expo login 

प्रतिक्रिया-नेविगेशन स्थापित करें

ताकि हम एक स्क्रीन से दूसरी स्क्रीन पर स्विच कर सकें, हमें रिएक्शन-नैट्रेशन डाउनलोड करना होगा:

 yarn add react-nativation 

विकास शुरू

अब हम अपना विकास शुरू करते हैं।

पहली चीज़ जो हम करेंगे, वह है App.js (हमारी मुख्य फ़ाइल)।

मेकअप

हमारे एप्लिकेशन को आकर्षक बनाने के लिए, हम कुछ तत्वों को जोड़ेंगे और उनकी शैलियों को जोड़ेंगे।

सबसे पहले, शीर्ष लेख जोड़ें:

 render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> </ScrollView> </SafeAreaView> ); } const styles = StyleSheet.create({ textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, }); 

अब लेखों के आउटपुट के साथ एक ब्लॉक जोड़ते हैं और इसे स्टाइल करते हैं।

 import * as React from 'react'; import { View, Text, SafeAreaView, StyleSheet, Image, Dimensions, ScrollView } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons' export default class App extends React.Component { constructor(props) { super(props); this.state = { isLoading: true, fontLoaded: false } } async componentDidMount() { return fetch('http://rapprogtrain.com/server-side/test.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson }, function() { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } FlatListItemSeparator = () => { return ( <View /> ); } render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> <View style={styles.postContainer}> <Image source = {{ uri: "https://tinyjpg.com/images/social/website.jpg" }} style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4, borderWidth:1, borderColor:'#dddddd'}} /> <Text style={styles.textOfArticle} > Lorem Ipsum is simply dummy text of the printing and typesetting industry. </Text> <View style={{marginTop:10, flexDirection: 'row', justifyContent: 'space-between'}}> <Text style={{color:'#727272',fontSize:13}}>Lorem</Text> <View style={{flexDirection: 'row'}}> <Icon name="ios-eye" size={18} style={{color:'#727272', marginRight:3}} /> <Text style={{color:'#727272',fontSize:13}}>22</Text> </View> </View> </View> </ScrollView> </SafeAreaView> ); } } const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1 }, textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, textOfArticle:{ marginTop:7, fontSize:16, fontFamily: 'Roboto-M' }, postContainer :{ width: Dimensions.get('window').width, height:250, paddingBottom:10, padding:10 }, }); 

इस पर हमारा सबक समाप्त हो जाता है।

अगले पाठ में, हम mysql डेटा आउटपुट करेंगे।

यदि आप रुचि रखते हैं कि यह कैसे काम करता है, तो जाएं और इस एप्लिकेशन को डाउनलोड करें, एक समाचार टैब होगा - एक मोबाइल एप्लिकेशन

मेरी वेबसाइट http://rapprogtrain.com है

मैंने वीके और ट्विटर किया