React Native - Identify the active screen. Drawer

问题:

I am using stack navigator inside the drawer navigator. What I want to do is, I need to know the activeItem (the active screen), so as to display it as active.

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'
}); 

DrawerNavigator

const DrawerStack = DrawerNavigator({
  appointment: {
    screen: stackNav,
  },
}, {
  headerMode: 'none',
  gesturesEnabled: false,
  contentComponent: DrawerContainer

});

export default DrawerStack;

回答1:

What you can do is

In your context there is only one screen that can be active and that is appointment screen. If you want to know that if appointment screen is focused then you should check the props inside the DrawerContainer Component. It will give you the activeItemKey i.e appointment.

And then you can simply check in DrawerComponent that if

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

You can also pass the activeTintColor prop from DrawerNavigator as shown below You can find other DrawerNavigatorConfigs here

const DrawerStack = DrawerNavigator({
  appointment: {
    screen: stackNav,
  },
}, {
  headerMode: 'none',
  gesturesEnabled: false,
  contentComponent: DrawerContainer,
  contentOptions: {
    activeTintColor: '#e91e63',
    itemsContainerStyle: {
        marginVertical: 0,
    },
    iconContainerStyle: {
        opacity: 1
    }
  }
});

export default DrawerStack;