#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
снова визуализируете целое. Вот почему возникла ошибка с вложенным контейнером навигации. 🙂