从 BottomTab 切换抽屉

Question

我想从 BottomTab 切换抽屉...所以只要我按下选项卡图标，我就希望抽屉切换。我尝试了不同的解决方案，但没有成功。请帮忙。这是我的代码：

App.js

export default function App() {
    return (
        <SafeAreaView>
            <BottomTab/>
        </SafeAreaView>
    );
}

BottomTab.js:

const Tab = createBottomTabNavigator();

export default function BottomTab() {

    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="Home" component={DrawerTab} style={styles} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

Drawer.js:

const ScreenComponent = ()=>{
    return null
}

const ScreenComponentTwo = ()=>{
    return null
}

const Drawer = createDrawerNavigator();

export default function DrawerTab() {
    return (

        <Drawer.Navigator initialRouteName="Home">
            <Drawer.Screen name="Home" component={ScreenComponent}/>
            <Drawer.Screen name="Notifications" component={ScreenComponentTwo}/>
        </Drawer.Navigator>

    );
}

Answer 1

您可以使用 tabBarButton 属性将您的自定义元素用于标签栏按钮。这样你就可以直接控制按下这个项目时发生的事情，你可以简单地调用 navigation.openDrawer();

https://reactnavigation.org/docs/bottom-tab-navigator#tabbarbutton

或者您可以使用 tabpress 事件覆盖默认行为并从那里调用 navigation.openDrawer();。

https://reactnavigation.org/docs/bottom-tab-navigator#tabpress

从 BottomTab 切换抽屉

toggle Drawer from BottomTab

react-native

react-native-navigation