ورقة مرجعية سريعة عن React Native (Expo)

إنشاء مشروع

npx create-expo-app@latest MyApp
cd MyApp
npx expo start

المكوّنات الأساسية

import { View, Text, TextInput, TouchableOpacity, FlatList } from 'react-native';

<View>              // حاوية (مثل <div>)
<Text>              // عرض نص
<TextInput />       // حقل إدخال نص
<TouchableOpacity>  // زر قابل للضغط
<FlatList />        // قائمة قابلة للتمرير
<ActivityIndicator> // مؤشر تحميل دوّار
<ScrollView>        // حاوية قابلة للتمرير

التنسيق

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  },
});

<View style={styles.container}>
  <Text style={styles.title}>Hello</Text>
</View>

الحالة باستخدام useState

import { useState } from 'react';

const [messages, setMessages] = useState<Message[]>([]);
const [input, setInput] = useState('');
const [loading, setLoading] = useState(false);

FlatList (لرسائل المحادثة)

<FlatList
  data={messages}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => (
    <View style={item.sender === 'user' ? userBubble : aiBubble}>
      <Text>{item.content}</Text>
    </View>
  )}
  ref={flatListRef}
  onContentSizeChange={() => flatListRef.current?.scrollToEnd()}
/>

TextInput وزر الإرسال

<View style={inputRow}>
  <TextInput
    style={inputField}
    value={input}
    onChangeText={setInput}
    placeholder="Type a message..."
  />
  <TouchableOpacity style={sendButton} onPress={handleSend}>
    <Text style={sendText}>Send</Text>
  </TouchableOpacity>
</View>

جلب البيانات باستخدام Fetch API

const API_BASE_URL = 'http://192.168.1.100:5000';

const sendMessage = async (text: string) => {
  const response = await fetch(`${API_BASE_URL}/api/chat`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: text }),
  });
  const data = await response.json();
  return data;
};

التعامل مع لوحة المفاتيح

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{ flex: 1 }}
>
  {/* your content */}
</KeyboardAvoidingView>

التشغيل على منصات مختلفة