Принудительно отключить при смене экрана

Question

Я недавно интегрировал React Redux и Redux Thunk в свое приложение в надежде, что это позволит мне лучше управлять состоянием на разных экранах.

Однако, используя мою библиотеку навигации (реагировать на собственный поток маршрутизатора), когда я перемещаюсь между экранами, я получаю предупреждения о попытке установить состояние для размонтированных компонентов, и я не уверен, что мне даже нужно размонтировать в componentWillUnmountпоскольку никакие звонки не должны происходить после экранной навигации.

Мой вопрос: как я могу принудительно размонтировать все на componentWillUnmount?Есть ли что-то встроенное в React Native, которое я должен использовать?Или в моей навигационной библиотеке?

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as Font from 'expo-font'

class CustomText extends Component {

    async componentDidMount() {
        await Font.loadAsync({
            'varelaround-regular': require('../../../assets/fonts/varelaround-regular.ttf'),
            'opensans-regular': require('../../../assets/fonts/opensans-regular.ttf'),
            'opensans-bold': require('../../../assets/fonts/opensans-bold.ttf'),
        });

        this.setState({ fontLoaded: true });
    }

    state = {
        fontLoaded: false,
    };


    setFontType = type => {
        switch (type) {
            case 'header':
                return 'varelaround-regular';
            case 'bold':
                return 'opensans-bold';
            default:
                return 'opensans-regular';
        }
    };

    render() {
        const font = this.setFontType(this.props.type ? this.props.type : 'normal');
        const style = [{ fontFamily: font }, this.props.style || {}];
        const allProps = Object.assign({}, this.props, { style: style });

        return (
            <View>
                {
                    this.state.fontLoaded ? (
                        <Text {...allProps}>{this.props.children}</Text>
                    ) : <Text></Text>
                }
            </View>
        );
    }
}
export default CustomText;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

И один из моих экранов:

import React from "react";
import { ActivityIndicator, Image, StyleSheet, View } from "react-native";
import { Actions } from "react-native-router-flux";
import { connect } from "react-redux";
import * as profile from "../actions/profile";
import {
  CustomText
} from "../components/common/";

class Home extends React.Component {
  componentDidMount() {
    this.props.loadProfile();
  }

  renderScreen() {
    return (

        <View style={{ flex: 1 }}>
          <View style={{ flex: 0.3 }}>
            <CustomText type="header" style={styles.headerTextStyle} onPress={() => Actions.home()}>
              Hello {this.props.name}!
            </CustomText>
          </View>
          </View>

    );
  }

  renderWaiting() {
    return (
      <GradientBackground type="purple">
        <View
          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
          <ActivityIndicator size="large" color="#FFF" />
        </View>
      </GradientBackground>
    );
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        {this.props.isLoading == true
          ? this.renderWaiting()
          : this.renderScreen()}
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    name: state.profile.profile.friendly_name,
    isLoading: state.profile.isLoading,
    error: state.profile.error
  };
}

function mapDispatchToProps(dispatch) {
  return {
    loadProfile: () => dispatch(profile.loadProfile())
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

const styles = StyleSheet.create({
  headerTextStyle: {
    color: "#FFFFFF",
    fontSize: 40,
    textAlign: "center",
    marginVertical: 50
  },
  basicViewStyle: {
    flex: 1
  }
});