دليل البداية لاستخدام معرض التنمية الوطنية

معرض للفهم في النظام الإيكولوجي الوطني للتفاعل

"العمليات الأصلية" "تُبنى مع "جافاسكورت" لكنها تعتمد على وحدات محلية لخصائص مثل الكاميرا أو "بلوتوث" أو "جي بي إس"

ويميز الفرق الرئيسي بين ] ] و]bare) سير العمل داخل المعرض، ويبدأ المبتدئون دائماً تقريباً بتدفق العمل المنظم، حيث يتعامل مع تشكيلة السكان الأصليين، وعندما ينمو تطبيقك، يمكنك " الرفض " إلى تدفق العمل العاري (المسمى الآن " البازدراء " ).

لماذا معرض المسائل للمبتدئين (وبعدها)

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

• Zero native setup]: لا حاجة إلى تركيب استديو أندرويد أو Xcode لبدء تشغيله، واستخدام برنامج الهاتف الخاص بالعرض السريع.
• Unified SDK]: جميع المكتبات التجريبية مستنسخة معاً، ولا داعي للقلق بشأن المكتبة ألف لكونها غير متوافقة مع المكتبة باء.
• Over-the-air (OTA) updates]: Push JavaScript changes directly to users without going through app store reviews.
• Instant sharing]: Generate a QR code to share your app in progress with teammates or clients.
• Strong community and documentation]: docss official Expo’s are among the best in the React Native ecosystem.

ولهذه الأسباب، فإن المعرض هو الآن نقطة البداية الموصى بها من قبل فريق ريكت الوطني نفسه. [النسخة الرسمية من الوثائق الوطنية ] يرشد المبتدئين إلى استخدام المعرض إذا كانوا جدداً في التنمية المتنقلة.

وضع برنامجك البيئي

الشروط المسبقة

• Node.js] (version 16 or later) – download from ]nodejs.org].
• A code editor] (VS Code is highly recommended).
• A mobile tool] with the Expo Go app installed (]iOS or Android).
• (Optional) An Expo account] for publishing and sharing - sign up at expo.dev.

Installing Expo CLI

"إكسبو سي إل" هي أداة خط القيادة التي تستخدمها لخلق و تشغيل وبناء التطبيقات، وتركيبها عالمياً عبر "ن.م"

npm install -g expo-cli

إذا استخدمت يارن، يمكنك تشغيل بدلا من ذلك، التحقق من التركيب مع ].

npx create-expo-app MyFirstApp --template blank

وينشئ هذا المشروع حدا أدنى من المشروع بآخر صيغة من نظام " اكسبو " (SExo SDK) والدعم المبني للنوع (Pescript) إذا ما رغب في ذلك.

استكشاف هيكل المشروع

Once your project is created, open it in your editor. Key files and directories:

• App.js ] (أو App.tsx) - نقطة دخول تطبيقك، كل شيء تصدره يبدأ هنا.
• package.json ] - lists dependencies (react, react-native, expo, and any Expo modules you install).
• app.json ] - تشكيلة مشروعك التجريبي (اسمه التطبيق، icon، شاشات الرش، الأذن، الخ).
• node modules] - يحتوي على جميع الطرود المركب.
• .expo] - local state for Expo, do not commit to version control.

جمال المعرض هو أنك لن ترى الروبوت أو الآيس كريم/الملفات إلا إذا هربت لاحقاً، كل شيء يتم إدارته من خلال المعرض

تشغيل برنامجك للمرة الأولى

نفايغيت إلى دليل مشروعك:

cd MyFirstApp

ابدأوا بدورة التنمية

npx expo start

A QR code appears in the terminal (or a web page opens with the QR code). Important: On iOS, use the default Camera app; on Android, use the Expo Go app to scan. The app will load on your tool, and any changes you save in your code editor will immediately reflect (hot reloading).

قضايا البداية المشتركة

• Connection issues]: Ensure your phone and computer are on the same Wi-Fi network. If that fails, use ] mode by press in the Expo CLI terminal. This works even on different networks.
• ]Expo Go app shows “Unable to find an app”: وهذا يعني عادة أن الخادم لم يبدأ بالكامل.
• Bundler stuck]: تحذف الملف وتحاول تطهير المخبأ.

بناء أول مشهد لك:

فلنصنع شاشات بسيطة مع زر يظهر إنذاراً، يستعاض عن مضمون بما يلي:

import React from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';

export default function App() {
 const showAlert = () => {
 Alert.alert('Hello!', 'You clicked the button.');
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Welcome to Expo!</Text>
 <Button title="Click Me" onPress={showAlert} />
 </View>
 );
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#f0f0f0',
 },
 title: {
 fontSize: 24,
 marginBottom: 20,
 },
});

وفّر الملف، ينبغي أن تظهر جهازك الشاشة فوراً، إذ أن الضغط على الزر يحفز التنبيه الوطني، إذ لاحظت أنك لم تكتب أي رمز من رموز جافا/كوتلين أو سويفت - استكشف أمر الرشوة.

إضافة الملاحة مع معرض Router

ومعظم التطبيقات لها شاشات متعددة. Expo Router] هي مكتبة الملاحة الموصى بها لأنها تستخدم أسلوباً قائماً على الملفات (السيملا إلى التالي.js) وهي تدعم الربط العميق، والتبويب، والحزم، والطرائق من الصندوق.

Install Expo Router

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants

ثم عدل لتحديد نقطة الدخول إلى .

app/
 index.js
 about.js
 _layout.js (optional, for shared layout)

In :

import { Link } from 'expo-router';
import { View, Text } from 'react-native';

export default function Home() {
 return (
 <View>
 <Text>Home Screen</Text>
 <Link href="/about">Go to About</Link>
 </View>
 );
}

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

وصول أجهزة التصوير المزودة بأجهزة إس دي كي

ويوفر هذا الاختبار أكثر من 50 وحدة تشغيلية للأجهزة، وهناك عدد قليل من الوحدات التي تستخدم عادة:

آلة تصوير

npx expo install expo-camera

يمكنك طلب الأذن، و أخذ الصور وتسجيل الفيديو

import { Camera } from 'expo-camera';
// ... request permission with Camera.requestCameraPermissionsAsync()

الموقع

npx expo install expo-location

الحصول على الموقع الحالي للمستعمل، أو مشاهدة تغيرات الموقع، أو عناوين الجغرافيا.

الإخطارات

npx expo install expo-notifications

الجدول الزمني وتعامل الإخطارات المحلية والإخطارات بالدفع - حتى أن هذا العرض يوفر خدمة للإخطار بالدفع حتى لا تحتاج إلى دعم عادي لإرسال المراكب.

نظام التمويل

npx expo install expo-file-system

اقرأ و اكتب و ادير ملفات عن الجهاز استعملت لصور التقطيع او لتحميل المحتوى

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

تقدير وفحص تطبيقك

(التحديد مباشرة في (إكسبو عندما تركضين (مترو) يقدم قائمة مطورة

• Reload] - إعادة تحميل حزمة جافاسكريبت.
• Open Inspector] – opens React DevTools in a browser for component inspector.
• Toggle Remote JS Debugging - enables debugging in Chrome DevTools (you can set breakpoints in your JavaScript).
• Show Element Inspector] - الاستفادة من عناصر UI لرؤية مناصراتها وأساليبها.

وفيما يتعلق بطلبات الشبكة، يمكن استخدام أدوات مثل React Native Debugger] أو مفتش الشبكة المبني في Chrome DevTools عندما يكون الإنزال عن بعد. وبالإضافة إلى ذلك، تظهر سجلات اكسبو في المحطة التي بدأت فيها الخادم، مما يظهر آثاراً وكميات إنتاجية.

استخدام الفلفل مع المعرض

وإذا كنت تفضلين مزيج الفلفل فيسبوك، فيمكنكم أن تصادروا تدفق العمل المكشوف لدعمه، ولكن بالنسبة لتدفق العمل المنظم، فإن الأدوات المدمجة تكون كافية عادة، ويعتمد الكثير من المطورين على سجلات ] مطوري الاكسبو الخاص و] React DevTools

الدولة الإدارية في معرض آب

تطبيقات "النسخة" هي تطبيقات محلية، لذا فإن إدارة الولاية تعمل بنفس الطريقة تماماً، يمكنك استخدام:

• React Context] and ]useReducer] for simple to moderately complex state.
• Zustand] or ]Jotai for a light weight, boilerplate-free state library.
• Redux Toolkit] for large-scale apps with many interconnected state slices.

ولا يفرض المعرض أي خيار محدد، إذ يوصى بالمبتدئين، بدءاً من خطافات " ريك " المبنية، ويمكنكم دائماً الهجرة إلى حل أكثر تطوراً في وقت لاحق.

مثال على السياقة:

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
 const [theme, setTheme] = useState('light');
 return (
 <ThemeContext.Provider value={{ theme, setTheme }}>
 {children}
 </ThemeContext.Provider>
 );
}
export const useTheme = () => useContext(ThemeContext);

اختبار تطبيقك

Expo supports Jest out of the box. Run and configure Jest in package.json, you can write unit tests for your components and snapshots. For end-to-end testing, Detox] works well but requires native builds. For managed work flow, consider

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import App from '../App';

test('button shows alert', () => {
 const { getByText } = render(<App />);
 fireEvent.press(getByText('Click Me'));
 // Assert that Alert was called (use jest.spyOn)
});

{
 "expo": {
 "updates": {
 "url": "https://u.expo.dev/YOUR_PROJECT_ID",
 "enabled": true
 }
 }
}