React Native - определить активный экран. Ящик-навигатор

Question

Я использую стековый навигатор внутри ящика навигатора. Мне нужно знать 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'
}); 

DrawerNavigator

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

});

export default DrawerStack;

Answer 1

Что вы можете сделать, это

В вашем контексте может быть активен только один экран - экран встреч. Если вы хотите знать, что, если экран назначения сфокусирован, вы должны проверить реквизиты внутри компонента 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;