动态隐藏底部选项卡导航器答案

【问题标题】：Hide Bottom Tabs Navigator Dynamically动态隐藏底部选项卡导航器
【发布时间】：2022-01-07 10:37:42
【问题描述】：

我有一个模态。

const RenderModal = ({
    modalActive,
}) => {
    return (
        <Modal
            animationType="slide"
            transparent={true}
            visible={modalActive}
        >
        </Modal>
    )
}

我像这样在我的父视图中呈现我的模式；

<RenderModal
    modalActive={modalActive}
/>

我像这样在我的父视图中激活我的模式；

<TouchableOpacity
    onPress={() => {
        setModalActive(true)
    }}
>
</TouchableOpacity>

当模式处于活动状态时，底部标签导航器仍然可见。

我想动态更改底部标签导航器的可见性。

为了实现这一点，我在下面添加到我的父视图中；

import { useNavigation } from '@react-navigation/native';
const navigation = useNavigation();

然后我像这样激活我的模态；

<TouchableOpacity
    onPress={() => {
        navigation.setOptions({ tabBarVisible: false });
        setModalActive(true)
    }}
>
</TouchableOpacity>

navigation.setOptions({ tabBarVisible: false }) 不工作。

如何动态隐藏底部标签导航器？

编辑：

下面也不行。

useEffect(() => {
  navigation.setOptions({tabBarVisible: !modalActive});
}, [modalActive])

【问题讨论】：

这可能不是“React”的做事方式，但现在您可以使用 CSS 过渡来动态显示或隐藏元素。就个人而言，我喜欢做所有可以在 CSS 中完成的事情......在 CSS 中 - 它更安全、更容易更改
它是 React Native :)

标签： javascript react-native react-navigation react-native-navigation react-native-tabnavigator

【解决方案1】：

您必须更改标签栏样式。

tabBarOptions: {{
 style: {
   height: isShow?140:0,
   overflow: isShow?'visible':'hidden'
 }
}}

【讨论】：

如何将isShow 传递给我的导航器？
你可以使用redux或useContext等状态管理包在组件之间共享状态。它在我的应用上运行良好