إنشاء تطبيق محمول على React Native

مرحبا بالجميع. سيكون هذا هو الجزء الأول في إنشاء تطبيقنا المحمول.

سنفعل تطبيق المحمول باستخدام رد فعل الأصلي والمعرض. لن نقوم بإنشاء تطبيق أخبار رائع. لهذا سوف نستخدم php عبر بقية api.

في تطبيقنا ، سوف نعرض المقالات التي ستكون في phpmyadmin.

ما هو المعرض؟

Expo ، عبارة عن مجموعة من الأدوات والمكتبات والخدمات التي تتيح لك إنشاء تطبيقاتك الخاصة لنظامي التشغيل iOS و Android باستخدام JavaScript. هذا يبدو واعدا. ببساطة ، يساعدك Expo على عرض المشاريع بينما لا تزال تعمل على تطويرها. يقوم Expo CLI بإنشاء عنوان URL للتطوير (مشابه للمضيف المحلي على الإنترنت) والذي يمكن فتحه بعد ذلك في عميل Expo لمعاينة التطبيق.

اكسبو التثبيت

قبل تثبيت المعرض ، تأكد من تثبيت npm.

npm install expo-cli —global 

تثبيت المعرض على اي فون

تثبيت المعرض على الروبوت


اكسبو يعطيك خيارات. يمكنك معاينة التطبيق الخاص بك من خلال تطبيق عميل Expo على جهازك المحمول أو باستخدام محاكي iOS / Android على جهاز الكمبيوتر الخاص بك. عند إنشاء التطبيق ، استخدمت المعرض على android.

إنشاء تطبيق المعرض

 epxo init 

بعد تثبيت Expo ، تفتح واجهة Expo CLI وتتيح لك اختيار اسم المشروع والقالب. سنختار صفحة فارغة

 cd newsApp expo start —tunnel 

بعد ذلك ، سيقوم المعرض بتشغيل خادم التطوير المحلي ، وفتح نافذة جديدة لعرض الخادم وتزويدك برمز الاستجابة السريعة لفتح مشروعك على جهازك المحمول. أو يمكنك التسجيل في تطبيق الهاتف المحمول ومعرض المعرض ، وسيظهر تلقائيًا التطورات الحالية في تطبيق الهاتف المحمول.

لدخول المعرض على جهاز الكمبيوتر الخاص بك ، استخدم هذا الأمر:

 expo login 

تثبيت رد فعل الملاحة

حتى نتمكن من التبديل من شاشة إلى أخرى ، نحتاج إلى تنزيل nativation:

 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

أنا كيه والتغريد