React Native ile Cross-Platform Mobil Uygulama Geliştirme

React Native, Facebook tarafından geliştirilen ve tek kod tabanıyla hem iOS hem de Android uygulamaları geliştirmenizi sağlayan güçlü bir framework. Bu makalede, React Native ile mobil uygulama geliştirmenin tüm yönlerini keşfedeceğiz.

React Native'e Giriş

Neden React Native?

• Tek kod tabanı ile iOS ve Android desteği
• Native performans
• Geniş topluluk desteği
• Hızlı geliştirme döngüsü

Kurulum

npx react-native init MyApp
cd MyApp
npm start

Temel Bileşenler

View ve Text

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

function App() {
  return (
    <View>
      <Text>Hello React Native!</Text>
    </View>
  );
}

StyleSheet

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Navigation

React Navigation

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

State Management

React Context

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

const AppContext = createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  
  return (
    <AppContext.Provider value={{ user, setUser }}>
      {children}
    </AppContext.Provider>
  );
}

function useApp() {
  return useContext(AppContext);
}

API Entegrasyonu

Fetch API

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

Platform-Specific Code

Platform Detection

import { Platform } from 'react-native';

if (Platform.OS === 'ios') {
  // iOS specific code
} else if (Platform.OS === 'android') {
  // Android specific code
}

Performance Optimization

Memoization

import { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    return expensiveCalculation(data);
  }, [data]);
  
  return <View>{/* Render */}</View>;
}

Testing

Jest ve React Native Testing Library

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

test('button press', () => {
  const { getByText } = render(<Button />);
  const button = getByText('Press me');
  fireEvent.press(button);
  // Assertions
});

Deployment

iOS Deployment

1. Xcode'da projeyi açın
2. Signing & Capabilities ayarlarını yapın
3. Archive oluşturun
4. App Store'a yükleyin

Android Deployment

1. Release build oluşturun
2. Signing key ile imzalayın
3. Google Play Console'a yükleyin

Sonuç

React Native, cross-platform mobil uygulama geliştirmek için güçlü bir araç. Bu rehberde öğrendiklerinizle, native performanslı mobil uygulamalar geliştirmeye başlayabilirsiniz.