React Native-标识活动屏幕抽屉导航器

【字号: 日期:2024-04-20浏览:12作者:雯心
(adsbygoogle = window.adsbygoogle || []).push({}); 如何解决React Native-标识活动屏幕抽屉导航器?

你能做的是

在您的上下文中,只有一个可以激活的屏幕,即约会屏幕。如果您想知道约会屏幕是否聚焦,则应检查DrawerContainer组件内的道具。它会给你activeItemKeyie任命。

然后,你可以简单地检查DrawerComponent,如果

this.props.activeItemKey === ’appointment’ ? { color: ’#000’ } : { color: ’#fff’ }]}

您也可以通过activeTintColor从DrawerNavigator道具如下所示,你可以找到其他DrawerNavigatorConfigs在这里

const DrawerStack = DrawerNavigator({ appointment: { screen: stackNav, },}, { headerMode: ’none’, gesturesEnabled: false, contentComponent: DrawerContainer, contentOptions: { activeTintColor: ’#e91e63’, itemsContainerStyle: {marginVertical: 0, }, iconContainerStyle: {opacity: 1 } }});export default DrawerStack;解决方法

我在抽屉式导航器中使用堆栈导航器。我想做的是,我需要知道activeItem(活动屏幕),以便将其显示为活动状态。

StackNavigator

const stackNav = StackNavigator({ homeComponent: { screen: HomeScreen },serviceScreen: { screen: ServiceScreen },serviceDetailScreen: { screen: ServiceDetailScreen },selectVehicleScreen: { screen: SelectVehileScreen },addEditVehicle: { screen: AddVehicle },dateTimeScreen: { screen: DateTimeScreen },reviewScreen: { screen: ReviewScreen },notesScreen: { screen: NotesScreen },},{ headerMode: ’none’});

抽屉导航器

const DrawerStack = DrawerNavigator({ appointment: { screen: stackNav,{ headerMode: ’none’,gesturesEnabled: false,contentComponent: DrawerContainer});export default DrawerStack;

相关文章: