> For the complete documentation index, see [llms.txt](https://uby-rn.gitbook.io/react-native/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uby-rn.gitbook.io/react-native/ders-2.0/react-native-baslangic/temel-komponentler.md).

# Temel Komponentler

Bu bölümde React Native'in kendi kütüphanelerini inceleyeceğiz ve kullanımlarını göreceğiz. Orijinal dokümantasyon için [tıklayınız](https://reactnative.dev/docs/components-and-apis)

### 1. View

`View`, diğer bileşenleri içerebilen ve düzeni oluşturan bir konteyner bileşenidir. HTML'deki `<div>` elementine benzer. Ekranın herhangi bir yerine yerleştirilebilir ve içindeki bileşenleri hizalayabilir, düzenleyebilir ve gruplayabilirsiniz.

```jsx
import { View, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View>
      <Text>Merhaba, Dünya!</Text>
    </View>
  );
}
```

### 2. Text

`Text`, ekranda metin içeriği göstermek için kullanılan bir bileşendir. HTML'deki `<span>` veya `<p>` elementine benzer. Metin stilleri, rengi ve boyutu gibi özelliklerini ayarlayabilirsiniz.

```jsx
import { Text } from 'react-native';

const MyComponent = () => {
  return (
    <Text style={{ fontSize: 20, fontWeight: 'bold', color: 'blue' }}>
      Merhaba, Dünya!
    </Text>
  );
}
```

### 3. Image

`Image`, görüntüleri göstermek için kullanılan bir bileşendir. HTML'deki `<img>` elementine benzer. `source` prop'unu kullanarak gösterilecek görüntünün kaynağını belirleyebilirsiniz.

```jsx
import { Image } from 'react-native';

const MyComponent = () => {
  return (
    <Image
      source={{ uri: 'https://example.com/image.jpg' }}
      style={{ width: 200, height: 200 }}
    />
  );
}
```

### 4. ScrollView

`ScrollView`, içeriği dikey veya yatay olarak kaydırmanıza olanak tanır. Ekrana sığmayan içeriği göstermek için kullanılır. HTML'deki `<div>` elementine benzer ancak içeriği otomatik olarak kaydırabilir.

```jsx
import { ScrollView, Text } from 'react-native';

const MyComponent = () => {
  return (
    <ScrollView>
      <Text>İçerik burada kayar</Text>
    </ScrollView>
  );
}
```

### 5. TextInput

`TextInput`, kullanıcıdan metin girişi almak için kullanılır. HTML'deki `<input>` elementine benzer. Kullanıcının metin girdiği bir metin kutusu oluşturur.

```jsx
import { TextInput } from 'react-native';

const MyComponent = () => {
  return (
    <TextInput
      placeholder="Kullanıcı adı"
      onChangeText={(text) => console.log(text)}
    />
  );
}
```

### 6. Button

`Button`, kullanıcının tıklamasına yanıt veren bir düğme oluşturur. HTML'deki `<button>` elementine benzer. `title` prop'unu kullanarak düğmenin metnini belirleyebilirsiniz.

```jsx
import { Button } from 'react-native';

const MyComponent = () => {
  const onPressButton = () => {
    console.log('Düğmeye tıklandı!');
  };

  return (
    <Button
      title="Tıkla"
      onPress={onPressButton}
    />
  );
}
```

### 7. TouchableOpacity

`TouchableOpacity`, dokunma veya tıklama olaylarına yanıt veren bir bileşendir. Bu bileşen, kullanıcıların dokunduklarında geribildirim almasını sağlar ve basit animasyonlarla kullanıcı etkileşimini artırır.

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

const MyComponent = () => {
  const onPressHandler = () => {
    console.log('Dokunma olayı gerçekleşti!');
  };

  return (
    <TouchableOpacity onPress={onPressHandler}>
      <Text>Dokun bana!</Text>
    </TouchableOpacity>
  );
}
```

### 8. FlatList

`FlatList`, uzun listelerde verileri görüntülemek için kullanılır. Listenin her öğesi için bir bileşen oluşturur ve yalnızca görüntülenen öğeleri bellekte tutar. Bu, büyük listelerin verimli bir şekilde görüntülenmesini sağlar.

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

const MyComponent = () => {
  const data = [
    { id: '1', title: 'Öğe 1' },
    { id: '2', title: 'Öğe 2' },
    { id: '3', title: 'Öğe 3' },
  ];

  const renderItem = ({ item }) => (
    <Text>{item.title}</Text>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
}
```

### 9. Modal

`Modal`, kullanıcıya odaklanmış bir iletişim kutusu görüntüler ve kullanıcının etkileşime girmesini bekler. Genellikle kullanıcıdan onay almak, ek bilgi talep etmek veya geçici içeriği görüntülemek için kullanılır.

```jsx
import { Modal, Text, View, Button } from 'react-native';
import React, { useState } from 'react';

const MyComponent = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!modalVisible);
  };

  return (
    <View>
      <Button title="Modal Göster" onPress={toggleModal} />
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={toggleModal}
      >
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <View style={{ backgroundColor: 'white', padding: 20 }}>
            <Text>Modal İçeriği</Text>
            <Button title="Kapat" onPress={toggleModal} />
          </View>
        </View>
      </Modal>
    </View>
  );
}
```

### 10. StatusBar

`StatusBar`, uygulamanın durum çubuğunun rengini, arka planını ve diğer özelliklerini kontrol etmek için kullanılır. Uygulamanızın görünümünü daha iyi kontrol etmek için kullanılabilir.

```jsx
import { StatusBar } from 'react-native';

const MyComponent = () => {
  return (
    <>
      <StatusBar barStyle="light-content" />
      {/* Diğer bileşenler burada */}
    </>
  );
}
```