Почему событие React Navigation «willFocus» не выполняется?

Question

Я создал несколько вкладок, использующих реагирование-навигация v2 в приложении-ответе.Я создал функцию componentDidMount, в которой вызывается willFocus.При первом запуске приложения и выбранной вкладке в первый раз willFocus не выполняется.Но когда я перехожу на другую вкладку и возвращаюсь на эту вкладку, то теперь выполняет willFocus.По какой причине willFocus не выполняется в первый раз и нормально работает во второй раз?

Требуемая вкладка componentDidMount

componentDidMount(){
    const {navigation} = this.props;
    navigation.addListener ('willFocus', async () =>{
      console.log("willFocus runs"
    });
}

Навигатор вкладок вложен в другие навигаторы, но я отображаю только навигатор вкладок ниже

TabNav: createBottomTabNavigator(
        {
            TAB1: Screen1,
            TAB2: Screen2,
            TAB3: Screen3,
            TAB4: Screen4,
            TAB5: Screen5,
            // Map: MapScreen
        },
        {
            initialRouteName: 'Bar',
            transitionConfig: NavigationConfig,
            navigationOptions: ({navigation})=>({
                tabBarIcon: ({focused, tintColor})=>{
                    const { routeName } = navigation.state;
                    let iconName, iconSize;
                    switch(routeName) {
                                case "TAB1":
                                    iconName = `icon1`;
                                    break;
                                case "TAB2":
                                    iconName = `icon2`;
                                    break;
                                case "TAB3":
                                    iconName = `icon3`;
                                    break;
                                case "TAB4":
                                    iconName = `icon4`;
                                    break;
                                case "TAB5":
                                    iconName = `icon5`;
                                    break;
                                default:
                                    break;
                                }
                    return <Icon name={iconName} color={tintColor} type="FontAwesome" />;
                },
            }),
            tabBarOptions: {
                activeTintColor: 'black',
                inactiveTintColor: 'grey',
                activeBackgroundColor: '#abaf9b',
                labelStyle: {
                    fontSize: 12,
                },
                // style for tabbar
                style: {
                    backgroundColor: '#ffffff',
                    height: 60,
                    justifyContent: 'space-around',
                    alignContent: 'center',
                    alignItems: 'center',
                },
                // style for tab
                tabStyle: {
                    paddingTop: 7,
                    paddingBottom: 7
                }
            },
        }
    ),

Answer 1

У меня также была эта проблема, и она была замечена как ошибка для реагирования на навигацию.Проверьте эту проблему для деталей.

У меня есть два предложения для решения проблемы.

1. Попробуйте обновить реагирующую навигацию и проверьте, решена ли проблема
2. Если первое решение не сработало, в качестве обходного пути я вызываю функцию два раза, если вы хотите быть увереннымэта функция вызывается как при первоначальном запуске приложения, так и при изменениях на экране.

PS: еще раз проверьте свою функцию и убедитесь, что повторный вызов функции не вызывает никаких побочных проблем

componentDidMount(){
    console.log("willFocus runs") // calling it here to make sure it is logged at initial start

    const {navigation} = this.props;
    navigation.addListener ('willFocus', async () =>{
      console.log("willFocus runs") // calling it here to make sure it is logged at every time screen is focused after initial start
    });
}