Реакция «Навигационная навигационная проблема: условное рендеринг навигатора» приводит к пустому экрану ⇐ IOS

[Anonymous]

Привет, реагировать Нативные эксперты, < /p>
Я сталкиваюсь с проблемой с условной навигацией в моем нативном приложении React, где переключение между навигаторами на основе состояния приводит к пустому экрану. Вот подробности: < /p>
Описание задачи: < /p>
Мое приложение структурировано для условного оказания одного из двух навигаторов (OnboardingNavigator или TabNavigator) на основе Isonboarded состояние. Несмотря на то, что экран AboutsingStart загружается идеально при непосредственной перемещении с App.js (при жестком кодировании), интеграция условия для переключения между навигаторами приводит к пустую экрану.
Поведение наблюдалось:
Если app.js непосредственно устанавливает OnboardNavigator, OnboardingStart работает без проблем.
При использовании условной логики на основе Isonboarded это приводит к пустому экрану, даже если журналы консоли подтверждают, что Isonboarded получается правильно и установлен на false. < /p>
Вопросы: < /p>
Может ли возникнуть проблема, связанная с обновлениями состояния или условным рендерингом в Native, которая может вызвать это
Какие стратегии или практики отладки я могу использовать для дальнейшей диагностики и решения этой проблемы? < /p>
import React, { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import OnboardingNavigator from './navigation/OnboardingNavigator';
import TabNavigator from './navigation/TabNavigator';

const App = () => {
const [isOnboarded, setIsOnboarded] = useState(null);

useEffect(() => {
const checkOnboarding = async () => {
try {
const onboarded = await AsyncStorage.getItem('@onboarded');
console.log('Onboarded Status:', onboarded);
setIsOnboarded(onboarded === 'true');
} catch (error) {
console.error('Failed to fetch onboarding status:', error);
}
};

checkOnboarding();
}, []);

return (

{isOnboarded ? : }

);
};

export default App;
< /code>
Это onathingingNavigator: < /p>
import { createStackNavigator } from '@react-navigation/stack';
import { Button, Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

import OnboardingStart from '../screens/onboarding/OnboardingStart';
import OnboardingLogin from '../screens/onboarding/OnboardingLogin';
import OnboardingLoginEmail from '../screens/onboarding/OnboardingLoginEmail';
import OnboardingBorn from '../screens/onboarding/OnboardingBorn';
import OnboardingHourly from '../screens/onboarding/OnboardingHourly';
import OnboardingGoal from '../screens/onboarding/OnboardingGoal';
import OnboardingSaving from '../screens/onboarding/OnboardingSaving';
import OnboardingSavingThings from '../screens/onboarding/OnboardingSavingThings';
import OnboardingSavingHardwork from '../screens/onboarding/OnboardingSavingHardwork';
import OnboardingSavingStopping from '../screens/onboarding/OnboardingSavingStopping';
import OnboardingSavingRetirement from '../screens/onboarding/OnboardingSavingRetirement';
import OnboardingTime from '../screens/onboarding/OnboardingTime';
import OnboardingTimeBuyBack from '../screens/onboarding/OnboardingTimeBuyBack';
import OnboardingTimeWork from '../screens/onboarding/OnboardingTimeWork';
import OnboardingTracker from '../screens/onboarding/OnboardingTracker';
import OnboardingPaywall from '../screens/onboarding/OnboardingPaywall';

const OnboardingStack = createStackNavigator();

function OnboardingNavigator({ setIsOnboarded }) {
const handleCompleteOnboarding = async () => {
try {
await AsyncStorage.setItem('@onboarded', 'true');
setIsOnboarded(true);
} catch (error) {
console.error("Failed to set onboarding complete:", error);
Alert.alert("Error", "Failed to complete onboarding. Please try again.");
}
};

return (
















(

)
}}
initialParams={{ setIsOnboarded: setIsOnboarded }} // Pass the setIsOnboarded down as a param
/>

);
}

export default OnboardingNavigator;
< /code>
И это Tabnavigator: < /p>
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons'; // Ensure this is installed
import Main from '../screens/Main';
import Lifetime from '../screens/Lifetime';
import Settings from '../screens/Settings';
import { createStackNavigator } from '@react-navigation/stack';

const Tab = createBottomTabNavigator();

// Custom Tab Bar Component
const CustomTabBar = ({ state, descriptors, navigation }) => {
return (

{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const isFocused = state.index === index;

const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});

if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};

const getIconName = (routeName) => {
switch (routeName) {
case 'Lifetime':
return 'home-outline';
case 'Main':
return 'cash-outline';
case 'Settings':
return 'person-outline';
default:
return 'ellipse-outline';
}
};

return (



);
})}

);
};

// **Main Tab Navigator Component**
const TabNavigator = () => (
}
>




);

export default TabNavigator;

// **Styles**
const styles = StyleSheet.create({
tabBarContainer: {
flexDirection: 'row',
height: 80,
backgroundColor: 'transparent', // Transparent background
alignItems: 'center',
justifyContent: 'space-around', // Evenly distribute buttons
position: 'absolute',
bottom: 25,
left: 0,
right: 0,
borderTopWidth: 1, // Add a thin line
borderTopColor: '#ccc', // Color of the line (light gray in this case)
},
tabButton: {
alignItems: 'center',
justifyContent: 'center',
flex: 1, // Equal space for each button
},
});


Подробнее здесь: https://stackoverflow.com/questions/794 ... o-blank-sc