Навигационный контейнер исчезает после заставки

#reactjs #react-native #react-navigation #react-navigation-bottom-tab

Вопрос:

Вчера вечером я внедрил заставку, а сегодня утром заметил, что она убирает мой навигатор на нижней вкладке. Я воссоздал проблему здесь

В закуске изначально вы увидите нижнюю вкладку навигатора. Если вы войдете в App.js и раскомментируйте вызов на экран, вы увидите, о чем я говорю.

Кто-нибудь знает, как я мог бы сделать так, чтобы этого не произошло? Заставка сама по себе немного дополнительная, так что, если вы, ребята, думаете, что было бы лучше поцарапать ее и заняться чем-то другим, я открыт для предложений!

Спасибо тебе за все, я ценю это больше, чем ты думаешь.

Ответ №1:

Причина, по которой вы не видите Нижнюю вкладку, заключается в том, что вы больше не отображаете эту часть приложения. Вы просто визуализировали <Home/> компонент внутри SplashScreen , который на самом деле не является экраном нижней вкладки, а экраном, который является частью всей нижней вкладки.

Чтобы это сработало, Вы можете сделать следующее,

внутри App.js экспортируйте свою MyTabs функцию.

 export function MyTabs() {
 // all the previous stuff
}
 

Затем импортируйте его внутрь SplashScreen , как показано ниже,

 import {MyTabs} from '../App' 
 

Теперь замените <Home></Home> на <MyTabs/> .

А вот и закуска

Не совсем уверен, что это хорошая практика, придется откопать несколько документов, но они будут работать для вашего варианта использования.

Комментарии:

1. Смогли ли вы воплотить это в примере и заставить его работать? Я получаю ошибку, когда делаю это с вложенным контейнером навигации.

2. Да, я разместил ссылку на закуску выше. snack.expo.dev/@nithinpp69/splash-animation . Я проверю еще раз

3. Я проверил еще раз, похоже, это работает. Не могли бы вы поделиться, пожалуйста, ошибкой, с которой вы столкнулись?.

4. Круто. Теперь, чтобы уточнить ваш предыдущий комментарий I get a different error when adding the brackets around MyTabs in the import as well . Нам нужно импортировать его в скобках, потому что функция MyTabs не является экспортной по умолчанию App.js . Если вы выполните импорт без скобок, он импортирует элемент по умолчанию , из App.js которого в нашем случае выполняется функция App() .

5. Еще одна вещь, так как вы попробовали импорт без скобок, он импортировал App() то, что имеет <NavigationContainer/> . Теперь ошибка выше имеет смысл, потому что теперь вы App.js снова визуализируете целое. Вот почему возникла ошибка с вложенным контейнером навигации. 🙂