React native 反应本机导航在登录后导航到主页时调用所有屏幕componentDidMount/componentWillMount

说明：我登录并导航到主页，发现它调用了两个屏幕的componentDidMount和componentWillMount，即主页和错误管理。如果我做错了什么，我想这是一个错误，因为标签。但无法解决。请帮我解决这个问题

从“React”导入React，{Component}； 从“反应导航”导入{createStackNavigator、createDrawerNavigator、CreateMaterialOptabNavigator}； 从“反应导航”导入{DrawerActions}； 从“react native”导入{视图、文本、样式表、平台、TouchableOpacity、图像、状态栏}

    import Login from '../Login';
    import Home from '../Profile';
    import ErrorManagement from '../screen/error-management/ErrorManagement'
    import DrawerScreen from '../DrawerScreen';


    const Tabs = createMaterialTopTabNavigator({
        Home: Home,
        'Error Management':ErrorManagement
    },{
        tabBarOptions: {
            scrollEnabled: true,
            lazyLoad: true,
            activeTintColor: '#000',
            inactiveTintColor: 'gray',
            style: {
                backgroundColor: '#fff',
            },
            tabStyle: {
                 width: 210
            },
            indicatorStyle: {
                backgroundColor: '#000',
            },
        }
    });

    const DrawerNavigator = createDrawerNavigator({
        Home:{
            screen: Tabs
        }
    },{
        initialRouteName: 'Home',
        contentComponent: DrawerScreen,
        drawerWidth: 300
    });

    const MenuImage = ({navigation}) => {
        if(!navigation.state.isDrawerOpen){
            return <Image source={require('../images/menu-button.png')}/>
        }else{
            return <Image source={require('../images/left-arrow.png')}/>
        }
    }


    const Routes = createStackNavigator ({
        Login : {
            screen : Login,
            navigationOptions: ({ navigation }) => ({
                header: null
            }),
        },
        Home : {screen : DrawerNavigator,
                navigationOptions: ({ navigation }) => ({
                    title: 'Middle-Office',  // Title to appear in status bar
                    headerLeft: 
                    <TouchableOpacity  onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
                        <MenuImage style="styles.bar" navigation={navigation}/>
                    </TouchableOpacity>,
                    headerStyle: {
                        backgroundColor: '#87ceeb',
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      fontWeight: 'bold',
                    },

                }),
            },
        },
        {
            initialRouteName: 'Login'
        }
    );



    export default Routes;

createTabNavigator接受了一个TabNavigator配置选项lazy，仅当用户在该选项卡上时，该选项才可用于装载和呈现选项卡。但是createMaterialTopTabNavigator没有这样的选项

但您可以使用react navigation中的withNavigationFocus查看屏幕是否有焦点，然后执行所需任务

但它仍然会同时挂载您的所有屏幕

我已在以下链接上创建了一个HOC：

您可以看到它使用withNavigationFocus并仅在屏幕聚焦时挂载屏幕。但有一个小问题，每次屏幕聚焦时都会重新安装屏幕

但是您可以了解如何通过稍微多做一些工作来满足您的用例。

惰性选项也适用于CreateMaterialOptabNavigator

因此，只需在createMaterialTopTabNavigator的TabNavigator配置中添加{lazy:true}属性

---

它将起作用：

lazy可以很好地与现在不推荐使用的TabNavigator配合使用。createMaterialTopTabNavigator是否有更具体的内容。