React Native ile Mobil Uygulama Geliştirme Rehberi 2025

React Native ile Cross-Platform Mobil Uygulama Geliştirme

zafer ak

Yazar

04 November 2025 12 dakika okuma 852 görüntülenme

Tek kod tabanıyla iOS ve Android uygulaması geliştirin. React Native kurulumu, navigasyon ve native modüller.

React Native Nedir?

React Native, Facebook tarafından geliştirilen, JavaScript ile native mobil uygulama geliştirmenizi sağlayan framework'tür. 2025'te hala en popüler cross-platform çözümlerden biridir.

Neden React Native?

Kod Paylaşımı: %90+ kod iOS ve Android'de ortak
Native Performans: Bridge yerine yeni mimari
Hot Reload: Anında değişiklik görme
Geniş Ekosistem: Binlerce hazır paket

Proje Kurulumu

# Expo ile hızlı başlangıç (önerilen)
npx create-expo-app MyApp
cd MyApp
npx expo start

# React Native CLI (native modüller için)
npx react-native init MyApp
cd MyApp
npx react-native run-ios
npx react-native run-android

Temel Componentler

import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  FlatList
} from "react-native";

export default function App() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState("");

  const addTask = () => {
    if (input.trim()) {
      setTasks([...tasks, { id: Date.now(), text: input }]);
      setInput("");
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Yapılacaklar</Text>

      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={input}
          onChangeText={setInput}
          placeholder="Yeni görev..."
        />
        <TouchableOpacity style={styles.button} onPress={addTask}>
          <Text style={styles.buttonText}>Ekle</Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.task}>
            <Text>{item.text}</Text>
          </View>
        )}
      />
    </View>
  );
}

Navigation

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}