react-native 与 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>
  );
}

仪表板.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”属性，这将推迟导航器呈现屏幕，直到用户单击它。这也将修复内存泄漏错误。