Не удалось найти объект навигации. Ваш компонент внутри NavigationContainer

После того, как пользователь войдет в систему, код вызовет: navigation.navigate('Dashboard'); для перехода к панели инструментов и отображения меню нижней вкладки. Однако это не работает. Как снова перейти со страницы входа в меню вкладок?

Если я удалю const navigation = useNavigation();, он все равно не работает

Это app.js:

export default function App() {

  const navigation = useNavigation();

  useEffect(() => {
    auth.onAuthStateChanged(user => {
      navigation.navigate('MyTabs');
      // alert("Should go dash");
    })
  }, [])
  
  if (1 == 1){
    return (
      <LoginScreen />
    );
  }
  return (
    <MyTabs />
  );
}

Это мое нижнее меню вкладок:

const Tab = createBottomTabNavigator();

const dashboardName = "Dashboard";
const activitesName = "Activities";
const friendsName = "Friends";

function MyTabs() {
  return (
    <NavigationContainer>
        <Tab.Navigator
        initialRouteName = {dashboardName}
        screenOptions = {({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
                let iconName;
                let rn = route.name;

                if (rn === dashboardName) {
                    iconName = 'stats-chart';
                } else if (rn === friendsName) {
                    iconName = 'person';
                } else {
                    iconName = 'calendar';
                }

                return <Ionicons name = {iconName} size = {size} color = {color} />


            },
            tabBarStyle:{
                height:60,
                backgroundColor: '#000000'
            },
            tabBarItemStyle:{
                activeTintColor: '#5DB075'
            }
        })}
        tabBarOptions = {{
            activeTintColor: '#5DB075',
            inactiveTintColor: '#ffffff',
            labelStyle: { paddingBottom: 10, fontSize: 10, outerHeight: 100},
        }}
        >
            
        <Tab.Screen name = {activitesName} component = {Activities} />
        <Tab.Screen name = {dashboardName} component = {Dashboard} />
        <Tab.Screen name = {friendsName} component = {Friends} />
        </Tab.Navigator>
    </NavigationContainer>

  );
}

Вы звоните navigate('MyTabs') не navigate('Dashboard')

David Scholz 05.04.2022 18:24

Спасибо! Я изменил это. Однако я считаю, что «const navigation = useNavigation();» вызывает ошибку

Marty 05.04.2022 22:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
35
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ни App, ни Login не расположены в навигаторе внутри навигационного контейнера. Это не может работать. Вам нужен рабочий процесс аутентификации, который условно отображает LoginScreen или все другие экраны. Навигация не нужна (и она в данном случае не работает).

Вот рекомендуемый способ, чтобы исправить это согласно react-native-navigation.

const Tab = createBottomTabNavigator();

const dashboardName = "Dashboard";
const activitesName = "Activities";
const friendsName = "Friends";

export default const App = () => {

    const [isSignedIn, setSignedIn] = useState()

    React.useEffect(() => {
      const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
           setSignedIn(user ? true : false)
      });
      return unsubscribe;
    }, [])

    return (
        <NavigationContainer>
           <Tab.Navigator
            initialRouteName = {dashboardName}
            screenOptions = {({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
                let iconName;
                let rn = route.name;

                if (rn === dashboardName) {
                    iconName = 'stats-chart';
                } else if (rn === friendsName) {
                    iconName = 'person';
                } else {
                    iconName = 'calendar';
                }

                return <Ionicons name = {iconName} size = {size} color = {color} 
             />
             },
              tabBarStyle:{
                height:60,
                backgroundColor: '#000000'
             },
              tabBarItemStyle:{
                activeTintColor: '#5DB075'
              }
           })}
           tabBarOptions = {{
            activeTintColor: '#5DB075',
            inactiveTintColor: '#ffffff',
            labelStyle: { paddingBottom: 10, fontSize: 10, outerHeight: 100},
        }}
        >

        {
             isSignedIn ? (
                 <>
                   <Tab.Screen name = {activitesName} component = {Activities} />
                   <Tab.Screen name = {dashboardName} component = {Dashboard} />
                   <Tab.Screen name = {friendsName} component = {Friends} />
                 </>
             ) : (
               <>
                <Tab.Screen name = {"Login"} component = {LoginScreen} />
               </>
             )
        } 
        </Tab.Navigator>
    </NavigationContainer>
  );
}

В вас LoginScreen вы можете скрыть TabBar, который теперь виден.


const LoginScreen = ({navigation}) => {
    useLayoutEffect(() => {
      navigation.setOptions({ tabBarStyle: { display: 'none' } });
    }, [navigation])

...

Другие вопросы по теме