المكونات الأساسية — أساسيات React Native

المكونات الأساسية في React Native

1. View - الحاوية الرئيسية

import { View } from 'react-native';

// View هو مثل div في HTML
<View style={{ flex: 1, backgroundColor: '#fff' }}>
  {/* محتوى */}
</View>

2. Text - عرض النصوص

import { Text } from 'react-native';

function Texts() {
  return (
    <>
      <Text style={{ fontSize: 24, color: '#333' }}>
        مرحباً بك!
      </Text>

      {/* نص متعدد الأسطر */}
      <Text numberOfLines={2} ellipsizeMode="tail">
        نص طويل جداً سيتم قطعه...
      </Text>
    </>
  );
}

3. Image - عرض الصور

import { Image } from 'react-native';

function Images() {
  return (
    <>
      {/* صورة محلية */}
      <Image
        source={require('./assets/logo.png')}
        style={{ width: 100, height: 100 }}
      />

      {/* صورة من الإنترنت: الأبعاد إلزامية */}
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={{ width: 200, height: 200 }}
        resizeMode="cover"
      />
    </>
  );
}

4. ScrollView - التمرير

import { ScrollView } from 'react-native';

<ScrollView 
  showsVerticalScrollIndicator={false}
  contentContainerStyle={{ padding: 20 }}
>
  {/* محتوى قابل للتمرير */}
</ScrollView>

5. TextInput - إدخال النصوص

import { TextInput } from 'react-native';

const [text, setText] = useState('');

<TextInput
  value={text}
  onChangeText={setText}
  placeholder="اكتب هنا..."
  style={{
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 8,
  }}
/>

6. TouchableOpacity - الأزرار

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

<TouchableOpacity 
  onPress={() => alert('تم الضغط!')}
  activeOpacity={0.7}
  style={{
    backgroundColor: '#3b82f6',
    padding: 15,
    borderRadius: 10,
  }}
>
  <Text style={{ color: '#fff', textAlign: 'center' }}>
    اضغط هنا
  </Text>
</TouchableOpacity>

7. FlatList - القوائم

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

const data = [
  { id: '1', name: 'عنصر 1' },
  { id: '2', name: 'عنصر 2' },
];

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <Text>{item.name}</Text>
  )}
/>