与本机一起使用createSwitchNavigator和createMaterialTopTabNavigator内存泄漏

Question

当前行为

单击登录并注销两次并等待登录页面后，出现内存泄漏错误。发生这种情况，是从createMaterialTopTabNavigator切换到createSwitchNavigator页面。

使用此project可以重现错误。

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in TabBar (at MaterialTopTabBar.tsx:92)
    in TabBarTop (at createMaterialTopTabNavigator.tsx:84)
    in Pager (at TabView.tsx:70)
    in RCTView (at TabView.tsx:128)
    in TabView (at createMaterialTopTabNavigator.tsx:136)
    in MaterialTabView (at createTabNavigator.tsx:228)
    in NavigationView (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)

预期的行为

在switchNavigator和materialTopTabNavigator页面之间导航后，预计不会发生内存泄漏。

代码示例

登录

import React from 'react';
import { Text, View, Button } from 'react-native';

// import { Container } from './styles';

export default function Dashboard({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Text>SignIn</Text>
      <Button title="Login" onPress={() => navigation.navigate('Dashboard')} />
    </View>
  );
}

Dashboard.js

import React from 'react';
import { Text, View, Button } from 'react-native';

// import { Container } from './styles';

export default function Dashboard({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Text>SignIn</Text>

      <Button
        title="Logout"
        onPress={() => navigation.navigate('SignIn')}
        color="red"
      />
    </View>
  );
}

routes.js

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';

import SignIn from './pages/SignIn';
import Dashboard from './pages/Dashboard';
import Classroom from './pages/Classroom';
import Student from './pages/Student';

const styleTab = {
  activeTintColor: 'blue',
  labelStyle: {
    fontSize: 20,
  },
  showIcon: false,
  inactiveTintColor: '#DDD',
  style: { elevation: 0 },
  tabStyle: {
    height: 80,
    backgroundColor: '#fff',
  },
  scrollEnabled: true,
  swipeEnabled: true,
  upperCaseLabel: false,
};

const Routes = createAppContainer(
  createSwitchNavigator(
    {
      SignIn,
      App: createMaterialTopTabNavigator({
        Dashboard: {
          screen: Dashboard,
          navigationOptions: {
            tabBarVisible: true,
            tabBarLabel: 'Dashboard',
            tabBarOptions: styleTab,
          },
        },
        Classroom: {
          screen: Classroom,
          navigationOptions: {
            tabBarVisible: true,
            tabBarLabel: 'Classroom',
            tabBarOptions: styleTab,
          },
        },
        Student: {
          screen: Student,
          navigationOptions: {
            tabBarVisible: true,
            tabBarLabel: 'Student',
            tabBarOptions: styleTab,
          },
        },
      }),
    },
    {
      initialRouteName: 'SignIn',
    },
  ),
);

export default Routes;

屏幕截图（如果适用）

Login page after error

您尝试了什么

我尝试了一些创建NavigationService并使用with navigation focus的解决方案，但均未成功。在这种情况下，我可能会缺少一些东西，也许很简单。

您的环境

• Android 8.0
• Ubuntu 18.04 LTS
• 反应导航“ ^ 4.0.10”，
• react-navigation-tabs“ ^ 2.6.2”
• 节点v10.15.3
• 纱线1.21.1

Answer 1

尝试向 Tab Navigator 添加“lazy”属性，这会延迟导航器呈现屏幕，直到用户点击它。这也将修复内存泄漏错误。