React Native Navigation 在登录后导航到主页时调用所有屏幕 componentDidMount/componentWillMount

Posted 2023-02-16

技术标签:

【中文标题】React Native Navigation 在登录后导航到主页时调用所有屏幕 componentDidMount/componentWillMount【英文标题】：React Native Navigation invoke all screens componentDidMount/componentWillMount when navigated to Home after login 【发布时间】：2018-12-01 12:24:04 【问题描述】：

解释：我登录并导航到主页，我发现它调用了两个屏幕（即主页和错误管理）的 componentDidMount 和 componentWillMount。我是不是做错了什么，我猜这是因为 Tabs 的错误。但无法解决。请帮我解决它。

从'react'导入反应，组件；从'react-navigation'导入createStackNavigator，createDrawerNavigator，createMaterialTopTabNavigator；从“反应导航”导入 DrawerActions ；从 'react-native' 导入 View,Text,StyleSheet,Platform,TouchableOpacity,Image,StatusBar;

    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;

【问题讨论】：

【参考方案1】：

createTabNavigator 接受了一个TabNavigatorConfig 选项lazy，仅当用户在该选项卡上时才能使用该选项挂载和呈现选项卡。但是createMaterialTopTabNavigator没有这样的选项。

但是您可以使用react-navigation 中的withNavigationFocus 来查看您的屏幕是否有焦点，然后您就可以完成所需的任务。

https://reactnavigation.org/docs/en/with-navigation-focus.html

但它仍然会一次挂载你的所有屏幕。

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

https://snack.expo.io/HkjVzm5-m

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

但您只需稍加努力即可了解如何根据您的用例来完成它。

【讨论】：

lazy 与现在已弃用的 TabNavigator 配合得很好。有没有更具体的 createMaterialTopTabNavigator。【参考方案2】：