在React Native中使用自定义文本时内存泄漏

Question

我正在进行我的React Native项目，我得到了著名的"CCD_ 1"；有时当我使用自定义文本组件时。这很奇怪，因为我遵循与文档相同的步骤。这是组件：

import React, { FunctionComponent } from "react";
import { Text, TextStyle } from "react-native";
import { AppLoading } from "expo";
import {
useFonts,
Montserrat_500Medium,
Montserrat_800ExtraBold,
} from "@expo-google-fonts/montserrat";
import { colors } from "./ConstantStyles";
type CustomTextProps = {
style?: TextStyle | TextStyle[];
variant?: string;
};
const PrimaryText: FunctionComponent<CustomTextProps> = ({
children,
style,
variant,
}) => {
let [fontsLoaded] = useFonts({
Montserrat_500Medium,
Montserrat_800ExtraBold,
});
const passedStyles = Array.isArray(style)
? Object.assign({}, ...style)
: style;
if (!fontsLoaded) {
return <AppLoading />;
} else {
return (
<Text
style={[
{
fontFamily:
variant === "bold"
? "Montserrat_800ExtraBold"
: "Montserrat_500Medium",
},
{ ...passedStyles },
]}
>
{children}
</Text>
);
}
};
export default PrimaryText;

我做错了什么？

Answer 1

您可以尝试以异步方式加载字体，并仅在未卸载的情况下在useEffect中对setState进行检查，如本expo文档中所示，使用fontloadasync而不是usefonts-hook

这是世博会小吃的例子

此外，我建议从本地缓存加载字体，而不是从直接web加载字体，这会稍微增加应用程序的大小，但字体加载速度会更快，就像上面的例子一样。