时间戳

首页 > 解决方案 > React Native - 识别活动屏幕。抽屉导航器

reactjs - React Native - 识别活动屏幕。抽屉导航器

问题描述

我在抽屉导航器中使用堆栈导航器。我想要做的是，我需要知道 activeItem（活动屏幕），以便将其显示为活动。

堆栈导航器

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;

标签： reactjsreact-nativereduxreact-navigation

解决方案

你能做的是

在您的上下文中，只有一个屏幕可以处于活动状态，那就是约会屏幕。如果您想知道约会屏幕是否聚焦，那么您应该检查 DrawerContainer 组件内的道具。它会给你activeItemKey即预约。

然后你可以简单地检查一下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;

推荐阅读