强制卸载屏幕更改

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
  }
});