React Native ile Hiragana ve Katakana öğrenme uygulaması geliştirme rehberi. Uygulama mimarisinden kod örneklerine, temel kavramlardan ileri optimizasyonlara adım adım rehberiniz.
Japonca, kendine özgü ve büyüleyici yazım sistemleriyle dünyanın en popüler dillerinden biridir. Özellikle Hiragana ve Katakana karakterleri, Japonca öğrenmeye yeni başlayan herkes için ilk ve en kritik adımı temsil eder. Ancak bu karakterleri ezberlemek, çoğu zaman sıkıcı ve tekrarlayıcı bir süreç olabilir. Geleneksel öğrenme yöntemleri genellikle yeterince etkileşimli değildir ve modern kullanıcıların beklentilerini karşılamakta zorlanabilir. Bu noktada, mobil uygulamaların gücü devreye giriyor. Peki, neden bu öğrenme sürecini eğlenceli, etkileşimli ve her an erişilebilir kılan bir mobil uygulama geliştirmeyelim? İşte bu sorunun cevabı, React Native gibi modern bir çerçeve kullanarak Japonca karakterleri öğrenmeyi kolaylaştıran bir uygulama geliştirmekten geçiyor.
React Native, JavaScript bilgisi olan geliştiricilerin iOS ve Android platformları için doğal (native) mobil uygulamalar geliştirmesini sağlayan açık kaynaklı bir çerçevedir. Bu, tek bir kod tabanıyla her iki platformda da çalışabilen uygulamalar oluşturabileceğiniz anlamına gelir, bu da geliştirme süresini ve maliyetini önemli ölçüde azaltır. Örneğin, eğer bir Japonca öğrenme uygulaması geliştirmek isteseydiniz ve hem iOS hem de Android kullanıcılarına ulaşmayı hedefleseydiniz, her platform için ayrı ayrı kod yazmanız gerekirdi. Bu durum, hem zaman alıcı hem de kaynak tüketici olurdu. Ancak React Native sayesinde, tek bir geliştirme ekibiyle ve aynı kod tabanı üzerinden her iki platform için de aynı anda uygulama çıkarabilirsiniz. Bu da özellikle küçük ekipler veya bireysel geliştiriciler için büyük bir avantajdır. Uygulamamızın temel amacı, kullanıcılara Hiragana ve Katakana karakterlerini görsel, işitsel ve etkileşimli bir şekilde öğretmektir. Flashcard’lar, quiz modları, yazma alıştırmaları ve ilerleme takibi gibi özelliklerle desteklenen bu uygulama, öğrenme deneyimini kişiselleştirilmiş ve eğlenceli hale getirecektir. Ayrıca, React Native’in geniş bileşen kütüphanesi ve aktif topluluğu, bu tür karmaşık ve etkileşimli UI’lara sahip uygulamaları geliştirmeyi oldukça kolaylaştırır. Performans açısından da React Native, doğrudan yerel UI bileşenlerini kullandığı için kullanıcıya akıcı ve doğal bir deneyim sunar. Geliştirme sürecinde karşılaşacağımız zorlukları ve bu zorlukların üstesinden nasıl geleceğimizi, adım adım kod örnekleri ve pratik bilgilerle bu makale boyunca detaylandıracağız. Bu nedenle, hem Japonca öğrenmek isteyenlere yardımcı olacak bir araç yaratmak hem de modern mobil uygulama geliştirme tekniklerini uygulamak adına React Native ile böyle bir projeye girişmek oldukça mantıklıdır. Bu proje, sadece bir dil öğrenme aracı olmakla kalmayacak, aynı zamanda React Native’in gücünü ve esnekliğini sergileyen kapsamlı bir vaka çalışması niteliği taşıyacaktır. Başlangıçta basit bir karakter gösteriminden, ileri düzey kişiselleştirilebilir öğrenme algoritmalarına kadar bir yolculuğa çıkacağız. Bu yolculukta, özellikle kullanıcı deneyimini merkeze alarak, sade ve anlaşılır bir arayüz ile öğrenme sürecini optimize etmeyi hedefleyeceğiz.
Temel Kavramlar ve Proje Mimarisi: Uygulamanın Temellerini Nasıl Atarız?
Bir React Native uygulamasını sıfırdan oluştururken, sağlam bir temel atmak projenin uzun vadeli başarısı için kritik öneme sahiptir. Öncelikle, React Native nedir sorusuna kısa bir değinelim. React Native, Facebook tarafından geliştirilen bir JavaScript kütüphanesi olup, web geliştirmede kullanılan React prensiplerini mobil platformlara taşır. Bu sayede, React geliştiricileri mevcut bilgilerini kullanarak hızla mobil uygulamalar geliştirebilirler. Hiragana ve Katakana ise Japonca yazım sisteminin temel taşlarıdır. Hiragana, Japonca kelimelerin dilbilgisel ekleri ve yerel Japonca kelimeler için kullanılırken, Katakana genellikle yabancı kökenli kelimeler, özel isimler ve vurgu için tercih edilir. Her iki alfabe de yaklaşık 46 temel karakterden oluşur ve öğrenme uygulamamızın odak noktası bu karakterler olacaktır.
Proje başlangıcı için iki ana seçenek bulunur: Expo CLI ve React Native CLI. Yeni başlayanlar ve hızlı prototipleme yapmak isteyenler için Expo, geliştirme sürecini büyük ölçüde basitleştirir. Çok sayıda yerel modül entegrasyonuyla uğraşmak istemiyorsanız Expo idealdir. Ancak daha fazla kontrol ve özelleştirme gerektiren projelerde React Native CLI daha uygun olabilir. Bizim senaryomuzda, uygulamanın karmaşıklığı başlangıçta çok yüksek olmayacağı için Expo CLI ile başlamak pratik bir seçim olacaktır. Projeyi başlatmak için şu komutu kullanabiliriz:
npx create-expo-app hiragana-katakana-app
cd hiragana-katakana-app
npx expo start
Proje oluşturulduktan sonra, düzenli bir klasör yapısı belirlemek önemlidir. Bu, projenin büyümesiyle birlikte kodun yönetilebilirliğini artırır. Önerilen klasör yapımız şöyle olabilir:
src/assets/(Görsel ve ses dosyaları)components/(Tekrar kullanılabilir UI bileşenleri)constants/(Sabit değerler, örneğin karakter listeleri)data/(Karakter verileri, quiz soruları)navigation/(Navigasyon yapılandırması)screens/(Uygulama ekranları)hooks/(Özel React Hook'ları)context/(State yönetimi için Context API)utils/(Yardımcı fonksiyonlar)
Karakter verilerini yönetmek için data/characters.json gibi bir dosya kullanabiliriz. Her karakter için Hiragana/Katakana formu, Romaji (Latin alfabesiyle okunuşu) ve isteğe bağlı olarak örnek kelimeler gibi bilgileri içerecektir. Örneğin:
[
{ "id": "h-a", "type": "hiragana", "char": "あ", "romaji": "a", "audio": "a.mp3" },
{ "id": "k-a", "type": "katakana", "char": "ア", "romaji": "a", "audio": "a.mp3" },
{ "id": "h-ka", "type": "hiragana", "char": "か", "romaji": "ka", "audio": "ka.mp3" }
]
State yönetimi, mobil uygulamaların kalbinde yer alır. Uygulamanın farklı ekranları ve bileşenleri arasında veri paylaşımı ve güncellemeler için bir mekanizma sağlar. Başlangıç seviyesi uygulamalar için React'ın kendi Context API'si yeterli olabilir. Bu, global durumları (örneğin, kullanıcı ilerlemesi, mevcut karakter seti) yönetmek için basit ve etkili bir yol sunar. Daha karmaşık senaryolar ve daha büyük uygulamalar için Redux, Zustand veya Recoil gibi kütüphaneler düşünülebilir. Context API ile basit bir ilerleme takibi bağlamı şöyle oluşturulabilir:
// src/context/LearningContext.js
import React, { createContext, useState, useContext } from 'react';
const LearningContext = createContext();
export const LearningProvider = ({ children }) => {
const [learnedCharacters, setLearnedCharacters] = useState([]);
const [score, setScore] = useState(0);
const addLearnedCharacter = (charId) => {
setLearnedCharacters((prev) => [...prev, charId]);
};
const updateScore = (points) => {
setScore((prev) => prev + points);
};
return (
{children}
);
};
export const useLearning = () => useContext(LearningContext);
Bu temel yapılandırma, uygulamanın iskeletini oluşturarak ilerleyen adımlarda daha karmaşık özellikler eklememize olanak tanır. Ayrıca, uygulamanın ölçeklenebilirliğini ve sürdürülebilirliğini sağlamak adına bu düzenli ve modüler yaklaşım, geliştirme sürecini daha verimli hale getirecektir. Projenin başlangıcında bu adımları doğru atmak, ilerleyen aşamalarda ortaya çıkabilecek birçok potansiyel sorunu önlememize yardımcı olacaktır.
Uygulamanın Arayüzü (UI) ve Temel Bileşenleri Nasıl Tasarlanır?
Kullanıcı arayüzü (UI), bir uygulamanın başarısında kilit rol oynar. Özellikle bir öğrenme uygulamasında, arayüzün sezgisel, temiz ve teşvik edici olması gerekmektedir. Kullanıcıların Hiragana ve Katakana karakterlerini kolayca görmesini, anlamasını ve etkileşim kurmasını sağlayacak bileşenler tasarlamak bu bölümde odak noktamız olacak. Uygulamamızın temel UI bileşenleri arasında karakter kartları (flashcards), kullanıcının cevap gireceği bir input alanı ve ekranlar arası geçişi sağlayan navigasyon sistemi yer alacaktır. Ayrıca, stilin nasıl yönetileceği ve mobil uyumluluğun nasıl sağlanacağı da önemli konular arasındadır.
Karakter kartları, uygulamanın ana öğrenme aracı olacaktır. Her kart, bir Japonca karakteri, onun Romaji okunuşunu ve belki de ilgili bir sesi içermelidir. Bu kartlar, kullanıcıya görsel bir ipucu sunarken, aynı zamanda interaktif elementlerle desteklenmelidir. Basit bir CharacterCard bileşeni şu şekilde oluşturulabilir:
// src/components/CharacterCard.js
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
const CharacterCard = ({ character, romaji, onAudioPress }) => {
return (
{character}
{romaji}
Sesi Dinle
);
};
const styles = StyleSheet.create({
card: {
backgroundColor: '#f8f8f8',
borderRadius: 15,
padding: 30,
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 6,
elevation: 8,
marginVertical: 20,
width: '80%', // Genişlik %80 olarak ayarlandı
aspectRatio: 1, // Kare şeklinde bir kart için
},
characterText: {
fontSize: 100,
fontWeight: 'bold',
color: '#333',
marginBottom: 10,
},
romajiText: {
fontSize: 32,
color: '#666',
marginBottom: 15,
},
audioButton: {
backgroundColor: '#5a67d8',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 25,
},
audioButtonText: {
color: '#fff',
fontSize: 18,
fontWeight: '500',
},
});
export default CharacterCard;
Kullanıcının cevaplarını gireceği input alanı, tipik bir TextInput bileşeni olacaktır. Ancak burada önemli olan, kullanıcının doğru veya yanlış cevap verdiğinde anında geri bildirim alabilmesini sağlamaktır. Bu, input alanının stilini dinamik olarak değiştirmek veya bir doğrulama mesajı göstermekle yapılabilir. Örneğin, doğru cevap verildiğinde input kenarlığı yeşil, yanlış verildiğinde kırmızı olabilir.
// src/components/QuizInput.js
import React from 'react';
import { TextInput, StyleSheet } from 'react-native';
const QuizInput = ({ value, onChangeText, isCorrect, editable }) => {
const inputStyle = [
styles.input,
isCorrect === true && styles.inputCorrect,
isCorrect === false && styles.inputIncorrect,
];
return (
Navigasyon için React Navigation kütüphanesini kullanacağız. Bu kütüphane, Stack Navigator, Tab Navigator ve Drawer Navigator gibi çeşitli navigasyon desenleri sunar. Uygulamamızda, temel olarak bir öğrenme ekranı, bir quiz ekranı ve belki bir ilerleme takibi ekranı olacağı için Stack Navigator ve/veya Tab Navigator yeterli olacaktır. Örneğin, ana ekranlar arasında geçiş için alt kısımda bir Tab Navigator kullanabiliriz:
// src/navigation/AppNavigator.js
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import LearningScreen from '../screens/LearningScreen';
import QuizScreen from '../screens/QuizScreen';
import ProgressScreen from '../screens/ProgressScreen';
import { Ionicons } from '@expo/vector-icons'; // İkonlar için
const Tab = createBottomTabNavigator();
const AppNavigator = () => {
return (
({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Öğren') {
iconName = focused ? 'book' : 'book-outline';
} else if (route.name === 'Test') {
iconName = focused ? 'help-circle' : 'help-circle-outline';
} else if (route.name === 'İlerleme') {
iconName = focused ? 'stats-chart' : 'stats-chart-outline';
}
return
);
};
export default AppNavigator;
Styling konusunda, React Native'in kendi StyleSheet API'si güçlü ve performanslı bir çözümdür. CSS benzeri bir syntax ile stiller tanımlanır ve bunlar doğrudan yerel görünümlere dönüştürülür. Daha dinamik stiller veya tema desteği için styled-components veya NativeBase gibi kütüphaneler de kullanılabilir. Mobil uyumluluk (responsive design) için, Dimensions API'sini kullanarak cihazın ekran genişliği ve yüksekliğini alabilir ve buna göre stilleri ayarlayabiliriz. Örneğin, farklı ekran boyutlarına göre font boyutunu veya bileşen genişliğini değiştirebiliriz. Web tarafındaki media queries mantığına benzer şekilde, Dimensions.get('window').width değerini kontrol ederek dinamik stil kararları alabiliriz. Bu sayede, uygulamanız hem küçük telefonlarda hem de büyük tabletlerde estetik ve işlevsel kalır. Özetle, kullanıcı arayüzünü tasarlarken sade, işlevsel ve estetik bir denge gözetmek, öğrenme sürecini keyifli hale getiren önemli bir faktördür.
Uzman İpucu: Tasarım sürecinde bir UI/UX tasarım aracı (Figma, Adobe XD) kullanarak uygulamanızın ekran akışını ve bileşenlerini önceden taslak olarak oluşturmak, geliştirme sürecinde zaman kazandırır ve tutarlı bir kullanıcı deneyimi sağlar.
Veri Yönetimi ve Öğrenme Algoritması: Karakterleri Etkin Şekilde Nasıl Öğretiriz?
Bir öğrenme uygulamasının kalbinde, verimli bir veri yönetimi ve akıllı bir öğrenme algoritması yatar. Bu bölüm, Hiragana ve Katakana karakter veri setini nasıl oluşturacağımızı, kullanıcıya karakterleri rastgele veya belirli bir düzende nasıl sunacağımızı ve öğrenmeyi pekiştirmek için doğrulama ve tekrar sistemlerini nasıl uygulayacağımızı açıklayacaktır. Amacımız, kullanıcıların karakterleri sadece ezberlemekle kalmayıp, gerçekten öğrenmelerini sağlayacak dinamik bir sistem kurmaktır. Veri setimiz, src/data/characters.json dosyasında saklanacaktır ve daha önce bahsettiğimiz gibi, her karakterin benzersiz bir kimliği, türü (hiragana/katakana), Japonca karakteri, Romaji okunuşu ve ses dosyasının yolu gibi bilgileri içerecektir. Bu JSON yapısı, uygulamanın statik verilerini kolayca yönetmemizi sağlar.
Karakter veri setinin oluşturulması kadar önemli olan bir diğer konu, bu verileri uygulamaya nasıl entegre edeceğimizdir. Tüm karakterleri tek bir yerde tutmak, uygulamanın farklı bölümlerinde kolayca erişilebilir olmasını sağlar. Öğrenme modunda, kullanıcıya rastgele bir karakter gösterilebilir veya belirli bir sıraya göre karakterler sunulabilir. Quiz modunda ise karakterler, kullanıcının geçmiş performansına göre seçilebilir. Rastgele karakter seçimi için basit bir yardımcı fonksiyon yazabiliriz:
// src/utils/learningUtils.js
import characters from '../data/characters.json';
export const getRandomCharacter = (type = null) => {
let filteredChars = characters;
if (type) {
filteredChars = characters.filter(char => char.type === type);
}
const randomIndex = Math.floor(Math.random() * filteredChars.length);
return filteredChars[randomIndex];
};
export const getAllCharacters = (type = null) => {
if (type) {
return characters.filter(char => char.type === type);
}
return characters;
};
Doğrulama mantığı, kullanıcının girdiği Romaji cevabını doğru Romaji okunuşuyla karşılaştırmayı içerir. Basit bir eşitlik kontrolü yeterli olsa da, olası yazım hatalarını veya farklı okunuş varyasyonlarını (örneğin "shi" ve "si") göz önünde bulundurarak daha esnek bir doğrulama sistemi geliştirmek faydalı olabilir. Bu, kullanıcı deneyimini iyileştirecektir. Ayrıca, kullanıcının cevabını küçük harfe çevirmek veya baştaki/sondaki boşlukları temizlemek gibi ön işlemler yapmak da hataları azaltacaktır.
// src/utils/learningUtils.js (devamı)
export const checkAnswer = (userAnswer, correctAnswer) => {
const normalizedUserAnswer = userAnswer.trim().toLowerCase();
const normalizedCorrectAnswer = correctAnswer.trim().toLowerCase();
return normalizedUserAnswer === normalizedCorrectAnswer;
};
En kritik kısım ise öğrenme algoritmasıdır. Basit bir uygulama için karakterleri rastgele sırayla göstermek ve doğru cevap verildiğinde bir sonraki karaktere geçmek yeterli olabilir. Ancak daha etkili bir öğrenme deneyimi için "Spaced Repetition System" (Aralıklı Tekrar Sistemi) prensiplerini uygulamak faydalı olacaktır. Bu sistemde, kullanıcı doğru cevap verdiğinde karakterin tekrar gösterilme süresi uzar, yanlış cevap verdiğinde ise kısalır. Bu, hafızayı pekiştirmek için optimize edilmiş bir yaklaşımdır. SuperMemo algoritması (SM-2) bu alanda popüler bir örnektir. Uygulamamızın ilk versiyonunda basit bir tekrarlama sistemi kullanabiliriz:
- Kullanıcının yanlış cevap verdiği karakterleri bir listeye ekle.
- Quiz sonunda bu yanlış cevapları tekrar sor.
- Bir karakter belirli sayıda doğru cevaplandığında "öğrenildi" olarak işaretle.
İstatistik takibi de öğrenme sürecinin önemli bir parçasıdır. Kullanıcının kaç karakteri öğrendiğini, hangi karakterlerde zorlandığını, toplam doğru/yanlış cevap oranını ve toplamda kaç seans çalıştığını kaydetmek, kullanıcının ilerlemesini görmesini sağlar ve motivasyonunu artırır. Bu veriler, uygulamanın state yönetiminde veya daha kalıcı bir depolama çözümü olarak Async Storage'da saklanabilir. Örneğin, bir kullanıcının her karakter için doğru/yanlış sayısını tutan bir yapı oluşturulabilir:
// src/context/LearningContext.js (güncellenmiş)
import React, { createContext, useState, useContext, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
const LearningContext = createContext();
export const LearningProvider = ({ children }) => {
const [characterStats, setCharacterStats] = useState({}); // { charId: { correct: N, incorrect: M, lastSeen: Date } }
const [sessionStats, setSessionStats] = useState({ totalQuizzes: 0, totalCorrect: 0, totalIncorrect: 0 });
useEffect(() => {
const loadStats = async () => {
try {
const storedCharStats = await AsyncStorage.getItem('characterStats');
const storedSessionStats = await AsyncStorage.getItem('sessionStats');
if (storedCharStats) setCharacterStats(JSON.parse(storedCharStats));
if (storedSessionStats) setSessionStats(JSON.parse(storedSessionStats));
} catch (e) {
console.error("Failed to load stats", e);
}
};
loadStats();
}, []);
useEffect(() => {
AsyncStorage.setItem('characterStats', JSON.stringify(characterStats));
}, [characterStats]);
useEffect(() => {
AsyncStorage.setItem('sessionStats', JSON.stringify(sessionStats));
}, [sessionStats]);
const updateCharacterStat = (charId, isCorrect) => {
setCharacterStats((prev) => {
const currentStats = prev[charId] || { correct: 0, incorrect: 0 };
return {
...prev,
[charId]: {
correct: currentStats.correct + (isCorrect ? 1 : 0),
incorrect: currentStats.incorrect + (isCorrect ? 0 : 1),
lastSeen: new Date().toISOString(),
},
};
});
setSessionStats((prev) => ({
...prev,
totalCorrect: prev.totalCorrect + (isCorrect ? 1 : 0),
totalIncorrect: prev.totalIncorrect + (isCorrect ? 0 : 1),
}));
};
const startNewQuizSession = () => {
setSessionStats((prev) => ({ ...prev, totalQuizzes: prev.totalQuizzes + 1 }));
};
return (
{children}
);
};
export const useLearning = () => useContext(LearningContext);
Bu şekilde, kullanıcıların öğrenme yolculuklarını daha anlamlı hale getirebilir, zorlandıkları alanları tespit etmelerine yardımcı olabilir ve kişiselleştirilmiş bir öğrenme deneyimi sunabiliriz. Öğrenme algoritmasının zamanla daha karmaşık hale getirilmesi, uygulamanın uzun vadeli değerini artıracaktır. Özellikle kullanıcıların hangi karakterlerde takıldığını belirleyip, o karakterleri daha sık sormak, öğrenme hızlarını önemli ölçüde artırabilir.
Etkileşim ve Geri Bildirim: Kullanıcı Deneyimini Nasıl Zenginleştiririz?
Bir öğrenme uygulamasında etkileşim ve anında geri bildirim, kullanıcı motivasyonunu ve öğrenme verimliliğini artıran temel unsurlardır. Sadece doğru ya da yanlış demek yeterli değildir; bu geri bildirimlerin görsel ve işitsel ipuçlarıyla desteklenmesi, kullanıcı deneyimini (UX) zenginleştirir ve öğrenmeyi daha keyifli hale getirir. Bu bölümde, doğru/yanlış animasyonları, sesli telaffuz entegrasyonu, ilerleme çubukları ve klavye yönetimi gibi konulara odaklanacağız.
Doğru veya yanlış cevap verildiğinde anında görsel geri bildirim sağlamak, kullanıcının dikkatini çeker ve cevabının sonucunu hızlıca anlamasına yardımcı olur. Örneğin, doğru cevap verildiğinde karakter kartının etrafında yeşil bir çerçeve belirip kaybolabilir, yanlış cevap verildiğinde ise kırmızı bir çerçeve görünebilir. Bu tür animasyonlar için React Native'in Animated API'si veya Lottie gibi kütüphaneler kullanılabilir. Basit bir titreşim veya kısa bir parlama efekti de oldukça etkilidir. Örneğin, doğru cevapta kısa bir "tick" sesi ve yeşil bir onay işareti animasyonu, yanlış cevapta ise bir "x" işareti ve hafif bir sarsılma efekti, kullanıcıya ne olduğunu anında bildirir.
// Quiz ekranında bir geri bildirim animasyonu için basit bir örnek
import React, { useRef, useEffect } from 'react';
import { Animated, Easing, View, Text, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
const FeedbackAnimation = ({ isCorrect }) => {
const scaleAnim = useRef(new Animated.Value(0)).current;
const opacityAnim = useRef(new Animated.Value(0)).current;
useEffect(() => {
if (isCorrect !== null) {
scaleAnim.setValue(0);
opacityAnim.setValue(0);
Animated.parallel([
Animated.timing(scaleAnim, {
toValue: 1,
duration: 300,
easing: Easing.out(Easing.ease),
useNativeDriver: true,
}),
Animated.timing(opacityAnim, {
toValue: 1,
duration: 200,
useNativeDriver: true,
}),
Animated.timing(opacityAnim, {
toValue: 0,
delay: 800,
duration: 300,
useNativeDriver: true,
}),
]).start();
}
}, [isCorrect]);
if (isCorrect === null) return null;
const iconName = isCorrect ? 'checkmark-circle' : 'close-circle';
const iconColor = isCorrect ? '#4CAF50' : '#F44336';
return (
);
};
const styles = StyleSheet.create({
feedbackContainer: {
position: 'absolute',
top: '40%',
alignSelf: 'center',
zIndex: 10,
},
});
export default FeedbackAnimation;
Sesli telaffuz, Japonca öğrenmede vazgeçilmez bir özelliktir. Kullanıcıların karakterlerin doğru okunuşunu duyması, telaffuz becerilerini geliştirmelerine yardımcı olur. Bu, iki şekilde entegre edilebilir: önceden kaydedilmiş ses dosyaları kullanmak veya Text-to-Speech (TTS) motorlarını kullanmak. Önceden kaydedilmiş ses dosyaları daha doğal ve tutarlı bir telaffuz sunar, ancak uygulamanın boyutunu artırabilir. Expo'nun expo-av kütüphanesi ile ses dosyalarını çalmak oldukça basittir. TTS ise dinamik içerik için esneklik sağlar ancak kalitesi cihazdan cihaza değişebilir. Basit bir ses çalma fonksiyonu örneği:
// src/utils/audioPlayer.js
import { Audio } from 'expo-av';
export const playAudio = async (uri) => {
try {
const { sound } = await Audio.Sound.createAsync(
uri,
{ shouldPlay: true }
);
await sound.playAsync();
} catch (error) {
console.error('Ses çalınamadı:', error);
}
};
İlerleme çubukları ve ödül sistemleri, kullanıcıları motive etmek için güçlü araçlardır. Bir quiz seansının başında bir ilerleme çubuğu göstermek, kullanıcıya ne kadar yol katettiğini görsel olarak anlatır. Her doğru cevapta bu çubuk dolabilir ve bir seans bittiğinde küçük bir ödül (puan, "başarı" rozeti) vermek, kullanıcının başarma hissini pekiştirir. Bu, oyunlaştırma (gamification) prensiplerinin bir uygulamasıdır ve öğrenme sürecini daha eğlenceli hale getirir. Örneğin, bir quizin kaç sorudan oluştuğunu ve kullanıcının kaç tanesini cevapladığını gösteren basit bir çubuk.
// src/components/ProgressBar.js import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const ProgressBar = ({ current, total }) => { const progress = (current / total) * 100; return (}]} />${progress}% {current} / {total} ); }; const styles = StyleSheet.create({ container: { width: '90%', marginVertical: 10, alignItems: 'center', }, progressBarBackground: { height: 10, width: '100%', backgroundColor: '#e0e0e0', borderRadius: 5, overflow: 'hidden', }, progressBarFill: { height: '100%', backgroundColor: '#5a67d8', borderRadius: 5, }, progressText: { marginTop: 5, fontSize: 16, color: '#666', }, }); export default ProgressBar;
Klavyeyi yönetmek de önemli bir detaydır. Kullanıcı bir metin giriş alanı kullandığında, klavyenin ekranın bir kısmını kaplamaması ve kullanıcı arayüzünü bozmaması gerekir. KeyboardAvoidingView bileşeni, bu tür durumlar için React Native'de yerleşik bir çözümdür. Ayrıca, quiz tamamlandığında veya doğru cevap verildiğinde klavyeyi otomatik olarak gizlemek, kullanıcı deneyimini daha akıcı hale getirir. Bu, Keyboard.dismiss() fonksiyonu ile yapılabilir. Bu detaylara dikkat etmek, uygulamanın genel kalitesini ve kullanıcı tarafından ne kadar beğenileceğini doğrudan etkiler.
Uygulamanın Test Edilmesi ve Performans Optimizasyonu: Daha İyi Bir Uygulama Nasıl Oluşturulur?
Bir uygulamanın geliştirme süreci sadece kod yazmaktan ibaret değildir; aynı zamanda bu kodun doğru çalıştığından emin olmak ve en iyi performansı sunmasını sağlamak da gerekir. Testler, hataları erken yakalamak ve kod kalitesini garanti altına almak için vazgeçilmezdir. Performans optimizasyonu ise kullanıcıların akıcı ve sorunsuz bir deneyim yaşamasını sağlar. Bu bölümde, React Native uygulamanızı test etmek için Jest ve React Native Testing Library gibi araçları, performansı artırmak için teknikleri ve hataları nasıl yöneteceğimizi ele alacağız.
Unit testleri, uygulamanın en küçük mantık birimlerinin (fonksiyonlar, bileşenler) beklenen şekilde çalışıp çalışmadığını doğrulamak için kullanılır. React Native projelerinde genellikle Jest test çerçevesi tercih edilir. Jest, sıfır yapılandırmalı olması, hızlı çalışması ve kapsamlı özellikleri nedeniyle popülerdir. Örneğin, learningUtils.js dosyamızdaki checkAnswer fonksiyonunu test edebiliriz:
// __tests__/learningUtils.test.js
import { checkAnswer } from '../src/utils/learningUtils';
describe('checkAnswer', () => {
it('should return true for correct answers', () => {
expect(checkAnswer('a', 'a')).toBe(true);
expect(checkAnswer('ka', 'Ka')).toBe(true); // Case-insensitive
expect(checkAnswer(' shi ', 'shi')).toBe(true); // Trimming spaces
});
it('should return false for incorrect answers', () => {
expect(checkAnswer('a', 'i')).toBe(false);
expect(checkAnswer('ki', 'ka')).toBe(false);
});
});
Entegrasyon testleri, birden fazla bileşenin veya modülün birbiriyle uyumlu çalışıp çalışmadığını kontrol eder. React Native Testing Library (RNTL), kullanıcı odaklı entegrasyon testleri yazmak için harika bir araçtır. RNTL, bileşenleri render eder ve kullanıcı etkileşimlerini simüle etmenize olanak tanır, bu sayede uygulamanızın gerçek dünya senaryolarında nasıl davrandığını test edebilirsiniz. Örneğin, bir karakter kartının doğru şekilde görüntülendiğini ve ses çalma düğmesine basıldığında onAudioPress fonksiyonunun çağrıldığını test edebiliriz.
// __tests__/CharacterCard.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import CharacterCard from '../src/components/CharacterCard';
describe('CharacterCard', () => {
it('renders character and romaji correctly', () => {
const { getByText } = render(
{}} />
);
expect(getByText('あ')).toBeTruthy();
expect(getByText('a')).toBeTruthy();
});
it('calls onAudioPress when the button is pressed', () => {
const mockOnAudioPress = jest.fn();
const { getByText } = render(
Performans optimizasyonu, özellikle mobil uygulamalar için kritik öneme sahiptir. Kullanıcılar yavaş veya takılan uygulamalardan hoşlanmazlar. React Native'de performansı artırmak için çeşitli teknikler bulunmaktadır:
- Memoization (
React.memo,useMemo,useCallback): Gereksiz yeniden render işlemlerini önler. Özellikle büyük ve karmaşık bileşenlerde veya bir listeyi render ederken bu teknikler çok işe yarar. - Sanallaştırma (Virtualization -
FlatList,SectionList): Uzun listelerle çalışırken sadece ekranda görünen öğeleri render ederek performansı artırır. Bu, hafıza ve CPU kullanımını önemli ölçüde azaltır. - Gereksiz render'ları önleme: State güncellemelerini minimize etmek, context kullanımını optimize etmek ve sadece ilgili bileşenlerin yeniden render olmasını sağlamak.
- Image optimizasyonu: Büyük resim dosyaları kullanmaktan kaçınmak, önbellekleme kullanmak ve resimleri uygun boyutlarda optimize etmek.
- Doğal sürücüler (Native Drivers): Animasyonlar için
useNativeDriver: truekullanmak, animasyonları JavaScript iş parçacığından bağımsız olarak doğal UI iş parçacığında çalıştırarak daha akıcı animasyonlar sağlar.
Hata yakalama ve izleme, uygulamanızın canlı ortamda nasıl davrandığını anlamak için hayati öneme sahiptir. Sentry veya Firebase Crashlytics gibi hizmetler, kullanıcılarınızın karşılaştığı hataları gerçek zamanlı olarak izlemenize ve raporlamanıza olanak tanır. Bu sayede, sorunları hızlıca tespit edip çözebilirsiniz. Mobil uyumluluk, özellikle farklı ekran boyutlarına ve yoğunluklarına sahip çok çeşitli Android cihazlar göz önüne alındığında kritik bir konudur. React Native'de Dimensions API'sini kullanarak ekran boyutlarını dinamik olarak alabilir ve stil kararlarınızı buna göre verebilirsiniz. Örneğin, web tarafındaki media query mantığına benzer şekilde, belirli bir ekran genişliğinin altında font boyutlarını veya bileşen düzenlerini değiştirebilirsiniz. Bu, uygulamanızın farklı cihazlarda tutarlı ve estetik görünmesini sağlar.
import { Dimensions, StyleSheet } from 'react-native';
const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
padding: width > 768 ? 40 : 20, // Tabletlerde daha fazla padding
},
text: {
fontSize: width > 768 ? 24 : 18, // Tabletlerde daha büyük font
},
});
Bu test ve optimizasyon stratejileri, uygulamanızın sadece işlevsel değil, aynı zamanda güvenilir ve kullanıcı dostu olmasını sağlayacaktır. Geliştirme sürecinin başından itibaren bu prensipleri benimsemek, uzun vadede çok daha sağlam ve başarılı bir ürün ortaya çıkarmanızı sağlar. Unutmayın, iyi bir uygulama sadece çalışan bir uygulama değil, aynı zamanda sorunsuz çalışan ve kullanıcılarını memnun eden bir uygulamadır.
Vaka Analizi: Gerçek Bir Öğrenme Uygulaması Deneyimi
Teorik bilgileri pekiştirmek adına, varsayımsal bir senaryo üzerinden bir vaka analizi yapalım. "KanjiQuest" adını verdiğimiz bir Japonca öğrenme uygulamasının geliştirme sürecini ele alalım. KanjiQuest, başlangıçta sadece Hiragana ve Katakana flashcard'ları sunan basit bir uygulamaydı. Ancak kullanıcı geri bildirimleri ve pazar araştırması, uygulamanın yeteneklerini artırma ihtiyacını ortaya koydu. Özellikle, kullanıcılar sadece karakterleri görmekle kalmayıp, kendi ilerlemelerini takip etmek ve yanlış cevapları tekrar gözden geçirmek istiyorlardı.
İlk aşamada, temel Hiragana kartları hazırlandı ve kullanıcının Romaji karşılığını girmesi istendi. Ancak kullanıcılar sık sık "ya yanlış yazarsam?" endişesiyle karşılaşıyordu. Örneğin, 'shi' karakterinin yazımı bazen 'si' olarak da kabul edilebiliyordu. Bu durumu ele almak için, doğrulama mantığı güncellendi. checkAnswer fonksiyonuna birden fazla kabul edilebilir Romaji varyasyonu eklendi. Başlangıçta checkAnswer(userAnswer, correctAnswer) iken, bu checkAnswer(userAnswer, acceptedAnswersArray) şeklinde geliştirildi. Bu, kullanıcıların küçük yazım hataları yüzünden moralinin bozulmasını engelledi ve daha affedici bir öğrenme ortamı sağladı. Bu teknik karar, kullanıcıların uygulamaya olan bağlılığını önemli ölçüde artırdı.
// src/utils/learningUtils.js (Vaka Analizi için güncellenmiş)
export const checkAnswerFlexible = (userAnswer, correctAnswers) => {
const normalizedUserAnswer = userAnswer.trim().toLowerCase();
// correctAnswers artık bir dizi olabilir: ['shi', 'si']
return correctAnswers.some(ans => ans.trim().toLowerCase() === normalizedUserAnswer);
};
İkinci önemli geri bildirim, kullanıcıların tekrar tekrar yanlış cevap verdikleri karakterleri gözden kaçırmalarıydı. Bu durum, "yanlış cevapları tekrar et" modunun geliştirilmesine yol açtı. Uygulamanın LearningContext'i, her karakter için doğru ve yanlış cevap sayısını tutmaya başladı. Bir quiz seansının sonunda, kullanıcıya yanlış cevap verdiği karakterlerin bir listesi sunuldu ve isterse bu karakterlerle özel bir "Pratik Modu" başlatma seçeneği verildi. Bu modda, sadece daha önce yanlış yapılan karakterler sırayla soruldu. Bu özellik, öğrenme deneyimini kişiselleştirerek kullanıcının zayıf yönlerine odaklanmasına olanak tanıdı ve kısa sürede karakterleri öğrenme oranını artırdı. Uygulama, bu sayede daha "akıllı" bir öğrenme arkadaşına dönüştü.
Teknik olarak, "Pratik Modu"nun implementasyonu sırasında önemli bir kararla karşılaşıldı: Karakterleri yerel depolama (Async Storage) üzerinde mi yoksa bir backend servisinde mi tutmalıyız? Başlangıçta Async Storage yeterli bulundu, ancak uygulamanın potansiyel büyümesi ve kullanıcıların cihazlar arası senkronizasyon talepleri göz önüne alındığında, Firebase Firestore gibi bulut tabanlı bir veritabanı kullanma kararı alındı. Bu, kullanıcı istatistiklerinin güvenli bir şekilde saklanmasını, cihazlar arasında senkronize edilmesini ve gelecekte liderlik tabloları gibi sosyal özelliklerin eklenmesini kolaylaştırdı. Bu geçiş, uygulamanın mimarisini başlangıçta planlandığından daha karmaşık hale getirse de, uzun vadede daha sağlam ve ölçeklenebilir bir yapı kurdu.
Uygulama yayına alındıktan sonra, bazı kullanıcılar uygulamanın belirli Android cihazlarda yavaş çalıştığından şikayet etti. Özellikle büyük karakter listeleri arasında gezinirken takılmalar yaşanıyordu. Bu performans sorununu çözmek için FlatList bileşeninde sanallaştırma teknikleri uygulandı. windowSize, initialNumToRender ve removeClippedSubviews gibi özellikler optimize edildi. Ayrıca, gereksiz render işlemlerini azaltmak için React.memo ile bileşenler sarmalandı ve useCallback hook'u ile stabil fonksiyon referansları sağlandı. Bu optimizasyonlar sayesinde, uygulamanın performansı önemli ölçüde iyileştirildi ve kullanıcı memnuniyeti arttı. KanjiQuest'in yolculuğu, sadece bir uygulamanın nasıl geliştirildiğini değil, aynı zamanda kullanıcı geri bildirimlerinin ve teknik optimizasyonların bir ürünün başarısını nasıl etkilediğini de gösteren gerçekçi bir vaka analizi sunmaktadır. Her adımda alınan kararlar, uygulamanın sadece işlevsel olmasını değil, aynı zamanda kullanıcıları için gerçekten değerli bir araç haline gelmesini sağlamıştır.
İleri Düzey Özellikler ve Gelecek Geliştirmeler: Uygulamanızı Nasıl Bir Sonraki Seviyeye Taşırsınız?
Hiragana ve Katakana öğrenme uygulamamızın temel işlevlerini tamamladıktan sonra, onu daha da zenginleştirecek ve kullanıcı deneyimini bir sonraki seviyeye taşıyacak ileri düzey özelliklere odaklanabiliriz. Bu özellikler, uygulamanızı rekabette öne çıkarırken, kullanıcıların öğrenme yolculuğunu daha kapsamlı ve etkileşimli hale getirecektir. Bu bölümde, özelleştirilebilir test modları, çizim tanıma, çevrimdışı destek, oyunlaştırma (gamification) ve veri senkronizasyonu gibi potansiyel geliştirmeleri inceleyeceğiz.
Özelleştirilebilir Test Modları: Kullanıcılar, öğrenme hızlarına ve tercihlerine göre farklı test modları isteyebilirler. Örneğin, sadece belirli bir karakter grubunu (örneğin 'A' grubu Hiragana karakterleri) test etme, karışık Hiragana ve Katakana testi yapma veya zaman kısıtlamalı testler gibi seçenekler sunulabilir. Bu, kullanıcının kendi zayıf yönlerine odaklanmasını ve öğrenme sürecini daha kişisel hale getirmesini sağlar. Uygulama arayüzünde, kullanıcının test etmek istediği karakter setini veya zorluk seviyesini seçebileceği filtreler ve seçenekler sunmak bu özelliği hayata geçirecektir. Ayrıca, kullanıcının daha önce yanlış yaptığı karakterleri tekrar eden bir "zayıf noktalar testi" de oldukça faydalı olacaktır.
Çizim Tanıma: Japonca karakterleri öğrenirken sadece okunuşunu ve yazılışını bilmek yetmez, aynı zamanda doğru el hareketleriyle yazabilmek de önemlidir. Uygulamamıza bir çizim tanıma özelliği eklemek, kullanıcıların ekran üzerinde karakterleri çizerek pratik yapmalarını sağlayabilir. Bu, react-native-signature-canvas gibi kütüphanelerle veya React Native'in kendi PanResponder ve SVG bileşenleriyle özel bir Canvas oluşturarak gerçekleştirilebilir. Çizilen karakteri bir makine öğrenimi modeli (örneğin, TensorFlow.js ile bir model eğiterek) aracılığıyla tanımak ve doğru olup olmadığını geri bildirim olarak vermek, öğrenme deneyimini muazzam derecede zenginleştirecektir. Bu, uygulamanızı piyasadaki diğer benzer uygulamalardan ayıran güçlü bir özellik olabilir.
Çevrimdışı Destek: Mobil uygulamaların en büyük avantajlarından biri, internet bağlantısı olmadan da çalışabilmeleridir. Tüm karakter verilerini, ses dosyalarını ve kullanıcı ilerleme istatistiklerini cihazda önbelleğe almak veya yerel olarak depolamak (Async Storage veya Realm DB gibi), kullanıcıların her yerde ve her zaman öğrenmeye devam etmesini sağlar. Özellikle seyahat ederken veya internet erişiminin kısıtlı olduğu durumlarda bu özellik, uygulamanın değerini artırır. Veri senkronizasyonu için Firebase Firestore veya AWS Amplify gibi servisler kullanılıyorsa, çevrimdışı önbellekleme yetenekleri bu servisler tarafından zaten sunulmaktadır.
Oyunlaştırma (Gamification): Öğrenme sürecini bir oyuna dönüştürmek, kullanıcı motivasyonunu artırmanın etkili bir yoludur. Puan tabloları, başarı rozetleri (achievements), seviye atlama sistemleri, günlük görevler veya öğrenme serileri (streaks) gibi özellikler ekleyebiliriz. Örneğin, her gün uygulama kullanarak veya belirli bir karakter sayısını öğrenerek kullanıcıya sanal bir ödül verilebilir. Bu tür özellikler, kullanıcıların uygulamayla düzenli olarak etkileşimde kalmasını teşvik eder ve öğrenmeyi daha eğlenceli ve rekabetçi hale getirir. Firebase Firestore ile kolayca liderlik tabloları ve kullanıcı skorları yönetilebilir.
Veri Senkronizasyonu ve Bulut Desteği: Kullanıcıların öğrenme ilerlemelerini farklı cihazlar arasında senkronize edebilmesi veya bir cihazı kaybettiklerinde ilerlemelerinin güvende kalması önemlidir. Firebase, Supabase veya AWS Amplify gibi Backend-as-a-Service (BaaS) platformları, kullanıcı kimlik doğrulaması, veritabanı yönetimi ve bulut depolama gibi konularda hızlı ve ölçeklenebilir çözümler sunar. Bu platformlar sayesinde, kullanıcı verilerini güvenli bir şekilde bulutta saklayabilir ve kullanıcıların her yerden kendi ilerlemelerine erişmelerini sağlayabiliriz. Bu aynı zamanda uygulamanın gelecekteki gelişimine de zemin hazırlar, çünkü daha karmaşık özellikler (örneğin, çoklu kullanıcı desteği veya eğitmen modları) bu tür bir altyapıyla daha kolay entegre edilebilir.
Bu ileri düzey özellikler, uygulamanızı sıradan bir flashcard uygulamasından çok daha fazlasına dönüştürecektir. Kullanıcıların Japonca öğrenme yolculuklarında gerçek bir yol arkadaşı olmasını sağlayacak, etkileşimli, kişiselleştirilmiş ve motive edici bir platform sunacaktır. Ancak her yeni özelliğin test edilmesi ve optimize edilmesi gerektiğini unutmamak önemlidir, böylece uygulamanızın kalitesi ve performansı her zaman yüksek kalır.
Sonuç: React Native ile Hiragana/Katakana Öğrenme Uygulaması Geliştirmenin Değeri Nedir?
Bu kapsamlı rehber boyunca, React Native kullanarak etkili bir Hiragana ve Katakana öğrenme uygulaması geliştirme sürecini adım adım inceledik. Girişten başlayarak, projenin temel mimarisini oluşturmayı, kullanıcı arayüzünü tasarlamayı, veri yönetimi ve öğrenme algoritmasını entegre etmeyi, kullanıcı deneyimini zenginleştiren etkileşim ve geri bildirim mekanizmalarını eklemeyi, uygulamanın test edilmesi ve performans optimizasyonunu gerçekleştirmeyi ve son olarak ileri düzey özelliklerle uygulamayı nasıl bir sonraki seviyeye taşıyacağımızı detaylandırdık. Gördüğümüz gibi, React Native, tek bir kod tabanıyla hem iOS hem de Android platformlarında çalışan, performanslı ve görsel olarak çekici uygulamalar geliştirmek için güçlü ve esnek bir platform sunuyor.
Bu projeden çıkarılan en önemli derslerden biri, planlamanın ve modüler tasarımın önemidir. Düzenli bir klasör yapısı, iyi tanımlanmış bileşenler ve sürdürülebilir bir state yönetimi stratejisi, projenin büyümesiyle birlikte kodun karmaşıklığını yönetmek için hayati öneme sahiptir. Ayrıca, kullanıcı geri bildirimlerinin geliştirme sürecinin her aşamasında değerli bir rehber olduğunu da gördük. "KanjiQuest" vaka analizi, kullanıcı ihtiyaçlarına duyarlı bir geliştirme sürecinin, uygulamanın başarısı üzerindeki doğrudan etkisini açıkça ortaya koydu. Performans optimizasyonu ve test süreçleri ise uygulamanın sadece işlevsel değil, aynı zamanda güvenilir ve kullanıcı dostu olmasını sağlayan temel adımlardır. Özellikle React Native'in sunduğu geliştirici deneyimi, bu tür eğitici uygulamaların hızla hayata geçirilmesine olanak tanır.
React Native ile Hiragana ve Katakana öğrenme uygulaması geliştirmek, sadece teknik becerilerinizi geliştirmekle kalmayıp, aynı zamanda Japonca öğrenen milyonlarca kişiye değerli bir araç sunma fırsatı yaratır. Bu tür bir proje, çapraz platform mobil geliştirmenin potansiyelini gözler önüne sererken, aynı zamanda dil öğrenimi gibi spesifik bir alandaki dijitalleşme ihtiyacına da güçlü bir yanıt sunar. Gelecekte, yapay zeka entegrasyonuyla kişiselleştirilmiş öğrenme yolları, VR/AR tabanlı etkileşimli dersler veya topluluk özellikleri gibi daha da gelişmiş özelliklerle bu uygulamaların potansiyeli sınırsızdır. Bu yolculuk, geliştiriciler için hem eğitici hem de ödüllendirici bir deneyim olmuştur ve mobil uygulama dünyasındaki yenilikçi çözümlerin kapılarını aralamaktadır. Nihayetinde, bu tür bir uygulama, öğrenmeyi sıkıcı bir görevden keyifli bir maceraya dönüştürebilir.
Sıkça Sorulan Sorular
-
Q: React Native ile geliştirmek için JavaScript bilmem şart mı?
A: Evet, React Native JavaScript üzerine inşa edilmiştir. Temel JavaScript, ES6+ özellikleri ve React kavramlarına (bileşenler, state, props, hook'lar) hakim olmak geliştirme sürecinizi büyük ölçüde kolaylaştıracaktır.
-
Q: Uygulamamı hem iOS hem de Android'de çalıştırmak için ayrı ayrı kod yazmam gerekiyor mu?
A: Hayır, React Native'in en büyük avantajlarından biri budur. Tek bir JavaScript kod tabanı yazarak hem iOS hem de Android platformları için doğal görünümlü uygulamalar geliştirebilirsiniz. Çok nadir durumlarda platforma özgü kod yazmanız gerekebilir, ancak genel olarak aynı kod kullanılır.
-
Q: Uygulamamın boyutunu küçük tutmak için nelere dikkat etmeliyim?
A: Büyük resim ve ses dosyalarını optimize etmek, gereksiz kütüphaneleri dahil etmemek ve uygulama paketinizi (bundling) doğru şekilde yapılandırmak önemlidir. Özellikle ses dosyaları için düşük bit hızlı formatlar kullanmak ve sadece gerekli olanları dahil etmek boyutun küçük kalmasına yardımcı olur.
-
Q: Expo mu yoksa React Native CLI mı kullanmalıyım?
A: Yeni başlayanlar ve hızlı prototipleme için Expo CLI harika bir başlangıç noktasıdır, çünkü birçok yerel kurulumu sizin için halleder. Ancak uygulamanızın daha karmaşık yerel modüllerle (örneğin, Bluetooth, çok gelişmiş kamera özellikleri) etkileşime girmesi gerekiyorsa veya tamamen doğal kontrol istiyorsanız, React Native CLI daha fazla esneklik sunar.
-
Q: Uygulamamın performansını nasıl izleyebilirim?
A: React Native Developer Menü'sündeki "Performance Monitor"u kullanabilirsiniz. Ayrıca React DevTools ile bileşen render sürelerini inceleyebilir, profil oluşturma araçlarını kullanarak darboğazları tespit edebilirsiniz. Sentry gibi araçlar da canlı ortamdaki performans sorunlarını izlemek için faydalıdır.