USER
uygulamam başlangıç ekranında takıldı kaldı, yüklenme sırasına göre console.loglar yerleştirir misin bakalım nerede takılıyor nerede bi sıkıntı var?
import React, { useRef, useCallback } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { Ionicons } from '@expo/vector-icons';
import { TouchableOpacity, View, StyleSheet } from 'react-native';
import { BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
import DiscoverScreen from '../screens/DiscoverScreen';
import ReadStoryScreen from '../screens/ReadStoryScreen';
import SettingsScreen from '../screens/SettingsScreen';
import CategoryDetail from '../screens/CategoryDetailScreen';
import ProfileScreen from '../screens/ProfileScreen';
import EditProfileScreen from '../screens/EditProfileScreen';
import LoginScreen from '../screens/LoginScreen';
import RegisterScreen from '../screens/RegisterScreen';
import VocabularyScreen from '../screens/VocabularyScreen';
import BugReportModal from '../screens/BugReportScreen';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import NotificationNavigation from '../utils/NotificationNavigation';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
// Separate HeaderButtons into its own component
const HeaderButtons = ({ navigation, hideButtons }) => {
const { theme } = useThemeAndLanguage();
const bottomSheetModalRef = useRef(null);
const handlePresentModalPress = useCallback(() => {
bottomSheetModalRef.current?.present();
}, []);
if (hideButtons) {
return null;
}
return (
<View style={styles.headerButtonsContainer}>
<TouchableOpacity onPress={handlePresentModalPress} style={styles.headerButton}>
<Ionicons name="bug-outline" size={24} color={theme.textColor} />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('Settings')} style={styles.headerButton}>
<Ionicons name="settings-outline" size={24} color={theme.textColor} />
</TouchableOpacity>
<BottomSheetModal
ref={bottomSheetModalRef}
index={0}
snapPoints={['70%', '95%']}
backgroundStyle={{ backgroundColor: theme.backgroundColor }}
handleStyle={{ backgroundColor: theme.backgroundColor }}
>
<BottomSheetScrollView style={{ backgroundColor: theme.backgroundColor }}>
<BugReportModal onClose={() => bottomSheetModalRef.current?.dismiss()} />
</BottomSheetScrollView>
</BottomSheetModal>
</View>
);
};
// Common screen options creator
const createScreenOptions = (theme, navigation, showHeaderButtons = true) => ({
headerStyle: {
backgroundColor: theme.lighterCardBackgroundColor,
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 1,
borderBottomColor: theme.borderColor,
},
headerTintColor: theme.textColor,
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 18,
},
headerTitleAlign: 'center',
headerRight: showHeaderButtons ? () => <HeaderButtons navigation={navigation} /> : undefined,
contentStyle: {
backgroundColor: theme.backgroundColor,
},
});
// Stack Navigators
const DiscoverStack = () => {
const { t, theme } = useThemeAndLanguage();
return (
<Stack.Navigator screenOptions={({ navigation }) => createScreenOptions(theme, navigation)}>
<Stack.Screen name="Discover" component={DiscoverScreen} options={{ title: t('discover') }} />
<Stack.Screen name="ReadStoryScreen" component={ReadStoryScreen} options={{ title: t('readMore') }} />
</Stack.Navigator>
);
};
const ProfileStack = () => {
const { t, theme } = useThemeAndLanguage();
return (
<Stack.Navigator screenOptions={({ navigation }) => createScreenOptions(theme, navigation)}>
<Stack.Screen name="Profile" component={ProfileScreen} options={{ title: t('profile') }} />
<Stack.Screen name="EditProfile" component={EditProfileScreen} options={{ title: t('editProfile') }} />
<Stack.Screen name="Login" component={LoginScreen} options={{ title: t('login') }} />
<Stack.Screen name="Register" component={RegisterScreen} options={{ title: t('register') }} />
</Stack.Navigator>
);
};
const VocabularyStack = () => {
const { t, theme } = useThemeAndLanguage();
return (
<Stack.Navigator screenOptions={({ navigation }) => createScreenOptions(theme, navigation)}>
<Stack.Screen name="Vocabulary" component={VocabularyScreen} options={{ title: t('vocabulary') }} />
</Stack.Navigator>
);
};
// Tab Navigator
const AppTabs = () => {
const { theme, t } = useThemeAndLanguage();
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
const iconName = {
[t('discover')]: focused ? 'compass' : 'compass-outline',
[t('myWords')]: focused ? 'book' : 'book-outline',
[t('profile')]: focused ? 'person' : 'person-outline',
}[route.name];
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarStyle: {
backgroundColor: theme.lighterCardBackgroundColor,
borderTopWidth: 1,
borderTopColor: theme.borderColor,
elevation: 0,
height: 60,
paddingBottom: 5,
paddingTop: 5,
},
tabBarItemStyle: {
padding: 5,
},
tabBarShowLabel: false,
tabBarActiveTintColor: theme.primaryColor,
tabBarInactiveTintColor: theme.secondaryColor,
})}
>
<Tab.Screen name={t('discover')} component={DiscoverStack} options={{ headerShown: false }} />
<Tab.Screen name={t('myWords')} component={VocabularyStack} options={{ headerShown: false }} />
<Tab.Screen name={t('profile')} component={ProfileStack} options={{ headerShown: false }} />
</Tab.Navigator>
);
};
// Main Navigator
const AppNavigator = () => {
const { theme, t } = useThemeAndLanguage();
return (
<BottomSheetModalProvider>
<Stack.Navigator
screenOptions={({ navigation }) => ({
...createScreenOptions(theme, navigation),
headerRight: () => {
const currentRoute = navigation.getState().routes[navigation.getState().index].name;
const hideButtons = ['Settings', 'CategoryDetail'].includes(currentRoute);
return hideButtons ? null : <HeaderButtons navigation={navigation} />;
},
})}
>
<Stack.Screen name="AppTabs" component={AppTabs} options={{ headerShown: false }} />
<Stack.Screen name="Settings" component={SettingsScreen} options={{ title: t('settings') }} />
<Stack.Screen name="CategoryDetail" component={CategoryDetail} options={{ title: t('categoryDetail') }} />
<Stack.Screen
name="NotificationNavigation"
component={NotificationNavigation}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</BottomSheetModalProvider>
);
};
const styles = StyleSheet.create({
headerButtonsContainer: {
flexDirection: 'row',
alignItems: 'center',
marginRight: 10,
},
headerButton: {
marginLeft: 15,
},
});
export default AppNavigator;
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './src/navigation/AppNavigator';
import { ThemeAndLanguageProvider } from './src/utils/ThemeAndLanguageContext';
import { VocabularyProvider } from './src/screens/VocabularyContext';
import StatusBarManager from './src/components/StatusBarManager';
import { HeartProvider } from './src/screens/HeartContext';
import { NotificationProvider } from './src/utils/NotificationContext';
function AppContent() {
return (
<>
<StatusBarManager />
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
</>
);
}
export default function App() {
return (
<ThemeAndLanguageProvider>
<NotificationProvider>
<HeartProvider>
<VocabularyProvider>
<AppContent />
</VocabularyProvider>
</HeartProvider>
</NotificationProvider>
</ThemeAndLanguageProvider>
);
}
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import NewsTab from './NewsTab';
import StoriesTab from './StoriesTab';
import { CustomTextR, CustomTextB } from '../components/CustomText'; // CustomText bileşenlerini import edin
const Tab = createMaterialTopTabNavigator();
const DiscoverScreen = () => {
const { theme, t } = useThemeAndLanguage();
// Dinamik renk belirleme
const activeTextColor = theme.primaryColor; // Aktif sekme rengi
const inactiveTextColor = theme.textColor; // Pasif sekme rengi
return (
<SafeAreaView style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
<Tab.Navigator
screenOptions={{
tabBarLabelStyle: { fontSize: 14, paddingHorizontal: 10 }, // Padding ekleyerek alan artır
tabBarStyle: {
backgroundColor: theme.backgroundColor,
paddingTop: 0,
marginTop: 0,
},
tabBarIndicatorStyle: {
backgroundColor: theme.primaryColor
},
tabBarActiveTintColor: activeTextColor, // Aktif yazı rengi
tabBarInactiveTintColor: inactiveTextColor, // Pasif yazı rengi
}}
>
<Tab.Screen
name="News"
component={NewsTab}
options={{
tabBarLabel: ({ focused }) => (
focused ? (
<CustomTextR style={{ color: activeTextColor }}>{t('news')}</CustomTextR>
) : (
<CustomTextR style={{ color: inactiveTextColor }}>{t('news')}</CustomTextR>
)
),
}}
/>
<Tab.Screen
name="Stories"
component={StoriesTab}
options={{
tabBarLabel: ({ focused }) => (
focused ? (
<CustomTextR style={{ color: activeTextColor }}>{t('stories')}</CustomTextR>
) : (
<CustomTextR style={{ color: inactiveTextColor }}>{t('stories')}</CustomTextR>
)
),
}}
/>
</Tab.Navigator>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default DiscoverScreen;
uygulamam nerede takılıyor bilmiyorum. loglar böyle:
Android Bundled 221ms index.js (1 module)
LOG Firebase app initialized
LOG Firestore initialized
LOG Auth initialized
LOG Storage initialized
yani bir yere kadar çalışıyor
import Constants from 'expo-constants';
import { initializeApp, getApps } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
const { extra } = Constants.expoConfig || {};
// Firebase configuration
const firebaseConfig = {
apiKey: extra?.apiKey || '',
authDomain: extra?.authDomain || '',
projectId: extra?.projectId || '',
storageBucket: extra?.storageBucket || '',
messagingSenderId: extra?.messagingSenderId || '',
appId: extra?.appId || '',
};
// Initialize Firebase
let app;
if (!getApps().length) {
app = initializeApp(firebaseConfig);
console.log('Firebase app initialized');
} else {
app = getApps()[0];
console.log('Firebase app already initialized');
}
const db = getFirestore(app);
console.log('Firestore initialized');
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage),
});
console.log('Auth initialized');
const storage = getStorage(app);
console.log('Storage initialized');
export { db, auth, storage };
gerekli yerlere console.log lar yerleştirelim bakalım nerede sorun varASSISTANT
Anladığım kadarıyla uygulamanız, Firebase bileşenlerini başarıyla başlatıyor ancak sonrasında takılıyor. Sorunun nerede olduğunu belirlemek için uygulamanızın farklı noktalarına `console.log` ekleyerek adım adım ilerleyebiliriz. Aşağıda, mevcut kodunuza nasıl `console.log` ekleyebileceğinizi göstereceğim. Bu sayede, uygulamanızın hangi aşamada takıldığını daha net görebileceğiz.
### 1. Firebase Başlatma Koduna Ek Loglar Ekleyelim
Firebase bileşenlerinizin başlatılması tamamlanmış. Burada her adımın ardından log eklemek iyi bir başlangıç. Görünüşe göre bu kısım zaten loglarınızı doğru şekilde yazıyor:
```javascript
import Constants from 'expo-constants';
import { initializeApp, getApps } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
const { extra } = Constants.expoConfig || {};
// Firebase configuration
const firebaseConfig = {
apiKey: extra?.apiKey || '',
authDomain: extra?.authDomain || '',
projectId: extra?.projectId || '',
storageBucket: extra?.storageBucket || '',
messagingSenderId: extra?.messagingSenderId || '',
appId: extra?.appId || '',
};
// Initialize Firebase
let app;
if (!getApps().length) {
app = initializeApp(firebaseConfig);
console.log('Firebase app initialized');
} else {
app = getApps()[0];
console.log('Firebase app already initialized');
}
const db = getFirestore(app);
console.log('Firestore initialized');
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage),
});
console.log('Auth initialized');
const storage = getStorage(app);
console.log('Storage initialized');
// Ek Log: Firebase bileşenlerinin tamamlandığını belirtiyoruz
console.log('All Firebase services initialized successfully');
export { db, auth, storage };
```
### 2. Provider Bileşenlerine Ek Loglar Ekleyelim
`App` bileşeninde kullandığınız sağlayıcıların (`Provider`) render edilip edilmediğini görmek için log ekleyelim:
```javascript
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './src/navigation/AppNavigator';
import { ThemeAndLanguageProvider } from './src/utils/ThemeAndLanguageContext';
import { VocabularyProvider } from './src/screens/VocabularyContext';
import StatusBarManager from './src/components/StatusBarManager';
import { HeartProvider } from './src/screens/HeartContext';
import { NotificationProvider } from './src/utils/NotificationContext';
function AppContent() {
console.log('AppContent rendered'); // Ek Log
return (
<>
<StatusBarManager />
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
</>
);
}
export default function App() {
console.log('App component rendered'); // Ek Log
return (
<ThemeAndLanguageProvider>
<NotificationProvider>
<HeartProvider>
<VocabularyProvider>
<AppContent />
</VocabularyProvider>
</HeartProvider>
</NotificationProvider>
</ThemeAndLanguageProvider>
);
}
```
### 3. AppNavigator Bileşenine Ek Loglar Ekleyelim
`AppNavigator` bileşeninin render edilip edilmediğini kontrol etmek için log ekleyelim:
```javascript
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { Ionicons } from '@expo/vector-icons';
import { TouchableOpacity, View, StyleSheet } from 'react-native';
import { BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
import DiscoverScreen from '../screens/DiscoverScreen';
import ReadStoryScreen from '../screens/ReadStoryScreen';
import SettingsScreen from '../screens/SettingsScreen';
import CategoryDetail from '../screens/CategoryDetailScreen';
import ProfileScreen from '../screens/ProfileScreen';
import EditProfileScreen from '../screens/EditProfileScreen';
import LoginScreen from '../screens/LoginScreen';
import RegisterScreen from '../screens/RegisterScreen';
import VocabularyScreen from '../screens/VocabularyScreen';
import BugReportModal from '../screens/BugReportScreen';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import NotificationNavigation from '../utils/NotificationNavigation';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
// ... (HeaderButtons bileşeni ve diğer yardımcı fonksiyonlar)
// Stack Navigators
const DiscoverStack = () => {
console.log('DiscoverStack rendered'); // Ek Log
const { t, theme } = useThemeAndLanguage();
return (
<Stack.Navigator screenOptions={({ navigation }) => createScreenOptions(theme, navigation)}>
<Stack.Screen name="Discover" component={DiscoverScreen} options={{ title: t('discover') }} />
<Stack.Screen name="ReadStoryScreen" component={ReadStoryScreen} options={{ title: t('readMore') }} />
</Stack.Navigator>
);
};
const ProfileStack = () => {
console.log('ProfileStack rendered'); // Ek Log
const { t, theme } = useThemeAndLanguage();
return (
<Stack.Navigator screenOptions={({ navigation }) => createScreenOptions(theme, navigation)}>
<Stack.Screen name="Profile" component={ProfileScreen} options={{ title: t('profile') }} />
<Stack.Screen name="EditProfile" component={EditProfileScreen} options={{ title: t('editProfile') }} />
<Stack.Screen name="Login" component={LoginScreen} options={{ title: t('login') }} />
<Stack.Screen name="Register" component={RegisterScreen} options={{ title: t('register') }} />
</Stack.Navigator>
);
};
const VocabularyStack = () => {
console.log('VocabularyStack rendered'); // Ek Log
const { t, theme } = useThemeAndLanguage();
return (
<Stack.Navigator screenOptions={({ navigation }) => createScreenOptions(theme, navigation)}>
<Stack.Screen name="Vocabulary" component={VocabularyScreen} options={{ title: t('vocabulary') }} />
</Stack.Navigator>
);
};
// Tab Navigator
const AppTabs = () => {
console.log('AppTabs rendered'); // Ek Log
const { theme, t } = useThemeAndLanguage();
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
const iconName = {
[t('discover')]: focused ? 'compass' : 'compass-outline',
[t('myWords')]: focused ? 'book' : 'book-outline',
[t('profile')]: focused ? 'person' : 'person-outline',
}[route.name];
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarStyle: {
backgroundColor: theme.lighterCardBackgroundColor,
borderTopWidth: 1,
borderTopColor: theme.borderColor,
elevation: 0,
height: 60,
paddingBottom: 5,
paddingTop: 5,
},
tabBarItemStyle: {
padding: 5,
},
tabBarShowLabel: false,
tabBarActiveTintColor: theme.primaryColor,
tabBarInactiveTintColor: theme.secondaryColor,
})}
>
<Tab.Screen name={t('discover')} component={DiscoverStack} options={{ headerShown: false }} />
<Tab.Screen name={t('myWords')} component={VocabularyStack} options={{ headerShown: false }} />
<Tab.Screen name={t('profile')} component={ProfileStack} options={{ headerShown: false }} />
</Tab.Navigator>
);
};
// Main Navigator
const AppNavigator = () => {
console.log('AppNavigator rendered'); // Ek Log
const { theme, t } = useThemeAndLanguage();
return (
<BottomSheetModalProvider>
<Stack.Navigator
screenOptions={({ navigation }) => ({
...createScreenOptions(theme, navigation),
headerRight: () => {
const currentRoute = navigation.getState().routes[navigation.getState().index].name;
const hideButtons = ['Settings', 'CategoryDetail'].includes(currentRoute);
return hideButtons ? null : <HeaderButtons navigation={navigation} />;
},
})}
>
<Stack.Screen name="AppTabs" component={AppTabs} options={{ headerShown: false }} />
<Stack.Screen name="Settings" component={SettingsScreen} options={{ title: t('settings') }} />
<Stack.Screen name="CategoryDetail" component={CategoryDetail} options={{ title: t('categoryDetail') }} />
<Stack.Screen
name="NotificationNavigation"
component={NotificationNavigation}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</BottomSheetModalProvider>
);
};
const styles = StyleSheet.create({
headerButtonsContainer: {
flexDirection: 'row',
alignItems: 'center',
marginRight: 10,
},
headerButton: {
marginLeft: 15,
},
});
export default AppNavigator;
```
### 4. DiscoverScreen ve Diğer Ekranlara Ek Loglar Ekleyelim
Her ekranın render edilip edilmediğini görmek için log ekleyelim:
```javascript
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import NewsTab from './NewsTab';
import StoriesTab from './StoriesTab';
import { CustomTextR, CustomTextB } from '../components/CustomText'; // CustomText bileşenlerini import edin
const Tab = createMaterialTopTabNavigator();
const DiscoverScreen = () => {
console.log('DiscoverScreen rendered'); // Ek Log
const { theme, t } = useThemeAndLanguage();
// Dinamik renk belirleme
const activeTextColor = theme.primaryColor; // Aktif sekme rengi
const inactiveTextColor = theme.textColor; // Pasif sekme rengi
return (
<SafeAreaView style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
<Tab.Navigator
screenOptions={{
tabBarLabelStyle: { fontSize: 14, paddingHorizontal: 10 }, // Padding ekleyerek alan artır
tabBarStyle: {
backgroundColor: theme.backgroundColor,
paddingTop: 0,
marginTop: 0,
},
tabBarIndicatorStyle: {
backgroundColor: theme.primaryColor
},
tabBarActiveTintColor: activeTextColor, // Aktif yazı rengi
tabBarInactiveTintColor: inactiveTextColor, // Pasif yazı rengi
}}
>
<Tab.Screen
name="News"
component={NewsTab}
options={{
tabBarLabel: ({ focused }) => (
focused ? (
<CustomTextR style={{ color: activeTextColor }}>{t('news')}</CustomTextR>
) : (
<CustomTextR style={{ color: inactiveTextColor }}>{t('news')}</CustomTextR>
)
),
}}
/>
<Tab.Screen
name="Stories"
component={StoriesTab}
options={{
tabBarLabel: ({ focused }) => (
focused ? (
<CustomTextR style={{ color: activeTextColor }}>{t('stories')}</CustomTextR>
) : (
<CustomTextR style={{ color: inactiveTextColor }}>{t('stories')}</CustomTextR>
)
),
}}
/>
</Tab.Navigator>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default DiscoverScreen;
```
### 5. Diğer Bileşenlerde ve Ekranlarda Loglar Ekleyelim
Her bir ekran ve önemli bileşende render edilip edilmediğini kontrol etmek için log eklemeyi unutmayın. Örneğin, `NewsTab`, `StoriesTab`, `ProfileScreen`, vb. ekleyebilirsiniz:
#### NewsTab.js
```javascript
import React from 'react';
import { View, Text } from 'react-native';
const NewsTab = () => {
console.log('NewsTab rendered'); // Ek Log
return (
<View>
<Text>News Tab</Text>
</View>
);
};
export default NewsTab;
```
#### StoriesTab.js
```javascript
import React from 'react';
import { View, Text } from 'react-native';
const StoriesTab = () => {
console.log('StoriesTab rendered'); // Ek Log
return (
<View>
<Text>Stories Tab</Text>
</View>
);
};
export default StoriesTab;
```
#### ProfileScreen.js
```javascript
import React from 'react';
import { View, Text } from 'react-native';
const ProfileScreen = () => {
console.log('ProfileScreen rendered'); // Ek Log
return (
<View>
<Text>Profile Screen</Text>
</View>
);
};
export default ProfileScreen;
```
Benzer şekilde, diğer tüm ekranlara da log ekleyin.
### 6. useEffect ve Diğer Hook'lara Log Ekleyelim
Eğer `useEffect` veya diğer hook'lar kullanıyorsanız, bunların tetiklenip tetiklenmediğini görmek için log ekleyin:
```javascript
import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
const ExampleComponent = () => {
console.log('ExampleComponent rendered'); // Ek Log
useEffect(() => {
console.log('ExampleComponent useEffect called'); // Ek Log
// Diğer logic
}, []);
return (
<View>
<Text>Example Component</Text>
</View>
);
};
export default ExampleComponent;
```
### 7. Hata Yakalama ve Loglama
Eğer herhangi bir yerde hata oluyorsa, bu hataları yakalayıp loglamak sorunun çözülmesine yardımcı olabilir. Özellikle `try-catch` blokları kullanarak hataları yakalayabilirsiniz:
```javascript
const SomeFunction = () => {
try {
console.log('SomeFunction: Starting execution'); // Ek Log
// İşlem
console.log('SomeFunction: Execution completed'); // Ek Log
} catch (error) {
console.error('SomeFunction Error:', error); // Hata Logu
}
};
```
Ayrıca, global hata yakalama için `ErrorBoundary` bileşeni kullanabilirsiniz:
```javascript
import React from 'react';
import { View, Text } from 'react-native';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
console.error('ErrorBoundary caught an error:', error);
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('ErrorBoundary componentDidCatch:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return (
<View>
<Text>Something went wrong.</Text>
</View>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
```
Bu `ErrorBoundary` bileşenini `App` bileşeninizin en üst seviyesine ekleyebilirsiniz:
```javascript
import ErrorBoundary from './src/components/ErrorBoundary';
export default function App() {
console.log('App component rendered'); // Ek Log
return (
<ErrorBoundary>
<ThemeAndLanguageProvider>
<NotificationProvider>
<HeartProvider>
<VocabularyProvider>
<AppContent />
</VocabularyProvider>
</HeartProvider>
</NotificationProvider>
</ThemeAndLanguageProvider>
</ErrorBoundary>
);
}
```
### 8. Son Adımlar ve Ekstra Kontroller
- **Terminal ve Metro Bundler Loglarını Kontrol Edin:** Bazen hatalar Metro Bundler tarafında görülebilir. Terminalde hata mesajlarına dikkat edin.
- **Asenkron İşlemler:** Eğer asenkron işlemler varsa (örneğin, veri çekme), bunların tamamlanıp tamamlanmadığını kontrol etmek için log ekleyin.
- **Infinite Loop Kontrolü:** Hatalı `useEffect` bağımlılıkları veya sürekli güncelleme yapan state değişiklikleri sonsuz döngülere neden olabilir. Bu tür durumları kontrol etmek için log ekleyin.
### Özet
Yukarıdaki adımları takip ederek uygulamanızın hangi noktasında takıldığını belirleyebilirsiniz. Adım adım `console.log` ekleyerek bileşenlerin render edilip edilmediğini, hook'ların tetiklenip tetiklenmediğini ve olası hataları gözlemleyebilirsiniz. Bu süreç sonunda, sorunun nerede olduğunu net bir şekilde belirleyebilir ve gerekli düzeltmeleri yapabilirsiniz.
Eğer hala sorun yaşıyorsanız, lütfen logların çıktısını paylaşın veya belirli hata mesajları hakkında daha fazla bilgi verin. Böylece daha detaylı yardım sağlayabilirim.
Umarım bu bilgiler sorununuzu çözmenize yardımcı olur!