Question

我已经在react native应用程序中使用react-navigation v2创建了一些标签。我已经创建了componentDidMount函数，其中将调用willFocus。第一次运行应用程序，并且第一次选择了我想要的选项卡，willFocus没有执行。但是，当我转到其他选项卡并返回到该选项卡时，将执行willFocus。是什么原因导致Focus第一次不执行而第二次可以正常工作？

所需的选项卡componentDidMount函数

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

Tab导航器与其他导航器嵌套在一起，但我只在下面显示选项卡导航器

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

我之所以遇到这个问题，是因为我很懒：在导致此问题的选项卡导航器中为true。我删除了它，现在它也可以在第一次点击时使用。

Answer 2

我也遇到了这个问题，据报道它是响应导航的错误。请查看this问题以获取详细信息。

我有两个建议可以解决此问题。

尝试更新反应导航并检查问题是否解决
如果第一个解决方案不起作用，作为一种解决方法，我要两次调用函数，如果要确保在应用程序的初始启动和屏幕更改时都调用了该函数。

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

为什么React导航事件“ willFocus”没有执行？

2 个答案: