如何解决从底部单击时如何使抽屉从右侧滑动反应原生
function TabNavigator() {
return(
<Tab.Navigator
screenoptions={({ route }) => ({
tabBarIcon: ({ focused,color,size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? require('./Src/Images/home.png')
: require('./Src/Images/newhome.png') ;
} else if (route.name === 'Pay') {
iconName = focused
? require('./Src/Images/quickpay.png')
: require('./Src/Images/quickpay.png') ;
}else if (route.name === 'SpeedTest') {
iconName = focused
? require('./Src/Images/speed.png')
: require('./Src/Images/speedtest.png') ;
}
else if (route.name === 'MenuTab') {
iconName = focused
? require('./Src/Images/category.png')
: require('./Src/Images/category.png') ;
}
// You can return any component that you like here!
return <Image source={iconName} style={{width: 25,height: 25}}
resizeMode="contain"/>;
},})}
tabBarOptions={{
activeTintColor: 'red',inactiveTintColor: 'gray',}}
>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="pay" component={payStack} />
<Tab.Screen name="SpeedTest" component={speedtestStack} />
<Tab.Screen name="MenuTab" component={DrawerNavigator} />
</Tab.Navigator>
)
}
const Drawer = createDrawerNavigator();
function DrawerNavigator() {
return(
<Drawer.Navigator initialRouteName="MenuTab"
// drawerContent={props => CustomDrawerContent(props)}
>
<Drawer.Screen name="MenuTab" component={TabNavigator} />
<Drawer.Screen name="Profile" component={ProfileScreen} />
<Drawer.Screen name="Recharge" component={RechargeScreen} />
<Drawer.Screen name="Support" component={ComplainStack} />
<Drawer.Screen name="Notification" component={NotificationScreen} />
<Drawer.Screen name="logout" component={logoutScreen} />
</Drawer.Navigator>
)
}
const StackComplain = createStackNavigator();
function ComplainStack() {
return(
<Stack.Navigator initialRouteName="Support">
<StackComplain.Screen name="Support" component={SupportScreen} options={{headerShown: false}}/>
<StackComplain.Screen name="Complain" component={ComplainScreen} options={{headerShown: false}}/>
</Stack.Navigator>
)
}
const StackApp = createStackNavigator();
export default function App() {
return (
<NavigationContainer >
{/* <CustomHeader/> */}
<Stack.Navigator initialRouteName="Splash">
<StackApp.Screen name="Splash" component={Splash} options={{headerShown: false}} />
<StackApp.Screen name="Middle" component={MiddleScreen} options={{headerShown: false}}/>
<StackApp.Screen name="HomeApp" component={DrawerNavigator} options={{headerShown: false}} />
<StackApp.Screen name="Login" component={LoginScreen} options={{headerShown: false}}/>
<StackApp.Screen name="Register" component={RegisterScreen} options={{headerShown: false}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
我想从右向左滑动并使底部导航的菜单选项卡... 这是我的代码
我在这里附上当前的屏幕截图 == first screen shot second screen shot
在当前的第二个屏幕截图中,当我按下菜单选项卡时,它没有打开抽屉屏幕,而是从顶部菜单按钮打开...如何从底部菜单选项卡打开...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。