React本机导航在登录后导航到主页时调用所有屏幕ComponentDidMount/ComponentWillMount

Question

说明:我登录并导航到Home，我发现它调用了两个屏幕componentDidMount和componentWillMount，即Home和Error-Management。我是不是做错了什么，我想这是一个错误，因为标签。但无法解决。请帮我解决这个问题。

从'React'导入React，{Component}；从“react-navigation”导入createStackNavigator，createDrawerNavigator，createMaterialTopTabNavigator}；从“react-navigation"导入{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;

Answer 1

选项也可用于 。

因此，只需在 的 中添加 属性。

它会起作用:）

Answer 2

接受 选项 ，仅当用户在该选项卡上时，该选项卡可用于挂载和呈现选项卡。但 没有这样的选项。

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

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

但它仍然可以一次挂载您的所有屏幕。

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

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

您可以看到它使用 ，并且只有当屏幕聚焦时才挂载屏幕。但有一个小问题，它是重新安装屏幕，每次屏幕得到聚焦。

但是您可以了解如何只需花很少的精力就可以完成它，以适合您的用例。