Может ли представление закрывать нижнюю вкладку?
В моем проекте я нахожусь в ситуации, когда было бы удобно «запретить пользователю взаимодействовать с приложением». Я хотел бы сделать это, отобразив невидимый экран, покрывающий весь дисплей.
Я заметил, что после отображения нижней вкладки я не могу заставить ее просмотреть. Есть ли способ, которым я могу дать моему мнению приоритет над всем? Я пробовал zIndex, но не повезло, я просто хочу, чтобы мой вид покрывал весь экран.
У меня есть демо-пример здесь, на выставке закусок, где вы можете точно воспроизвести мою проблему. Я также включил некоторый код ниже, который дает вам суть.
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name = "ScreenA" component = {ScreenA} />
<Tab.Screen name = "ScreenB" component = {ScreenB} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default function ScreenA() {
return (
<View style = {styles.container}>
<Text style = {styles.paragraph}>
Screen A.
</Text>
<View style = {{justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink', height: 500}}>
<Text style = {styles.paragraph}>Is it possible to make this view cover the entire screen? Including the bottom tab and top?</Text>
</View>
</View>
);
}
Я не совсем уверен, что вы имеете в виду под этим. Как я могу гарантировать, что модальное окно закроет нижнюю вкладку? Вы не против отредактировать мой пост о закусках, чтобы внести ясность?
Ответы 1
Взглянув на этот ответ stackoverflow, я придумал решение, которое скрывает/показывает кнопки панели вкладок в зависимости от состояния переменной:
const [showTabBar, setShowTabBar] = useState(false);
useEffect(() => {
props.navigation.setOptions({
tabBarStyle: { display: showTabBar ? 'flex' : 'none' },
});
}, [showTabBar, props.navigation]);
Хотя он полностью удаляет панель вкладок, он гарантирует, что панель вкладок не будет интерактивной. Если вы считаете необходимым, чтобы панели вкладок были видны, но не нажимались, вы можете сначала создать собственный компонент панели вкладок, добавить некоторую переменную, которая заставит кнопки ничего не делать, когда они активны, использовать ее в Tab.Navigator, а затем отобразить внизу экран в ScreenA, когда showTabBar имеет значение false (убедитесь, что для переменной unpressable установлено значение true)
Этот подход отключает нажатия на панель вкладок, но панель вкладок все еще видна. Также требуется немного больше усилий, чтобы получить значки TabBar.
Он также отключит нажатия кнопок на панели вкладок на всех экранах, поэтому, если вы его используете, убедитесь, что вы установили для tabBarIsActive значение true.
Спасибо за этих Фантомов, я собираюсь оставить пост немного длиннее, и, по крайней мере, я приму ваш ответ в качестве ответа. Мне любопытно, что вы подразумеваете под рендерингом пустого модального окна, своего быстрого грязного исправления.
Честно говоря, модальная идея может быть не такой грязной, как я думал. Не требует создания собственного навигатора вкладок или добавления дополнительных реквизитов на экраны snack.expo.dev/yJrp4XxdW
Подождите, это идеально. Спасибо!
Быстрым, грязным и простым решением было бы просто отобразить пустое модальное окно, которое вы удаляете всякий раз, когда хотите, чтобы взаимодействия были доступны. Я думаю, вам, возможно, придется настроить модальное окно, чтобы оно не отменялось при нажатии за его пределами.