React-Native自定义字体错误

问题描述

我想在我的react native应用程序中添加自定义字体，但是有一些困难

 export default function App() {
  const URL = ``;
  const image = {
    uri: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/paper_fibers.png",};
  const [Articles,setArticles] = useState("");
  const [loading,setLoading] = useState(true);
  const [MyFonts,setMyFonts] = useState(false);

  const renderItem = ({ item }) => {
    return (
        <View style={styles.container}>
        <View style={styles.card}>
          <View style={styles.header}>
            <Text
              style={{ fontWeight: "bold",fontFamily: Chomsky,fontSize: 14 }}
            >
              {item.titel}
            </Text>
          </View>
          <Text style={{ color: "gray",fontSize: 12 }}>{item.description}</Text>
        </View>
      </View>
    );
  };

  
  useEffect(() => {
    const LoadResourcesAsync = async () => {
        try {
            await Font.loadAsync({
              Chomsky: require("./assets/fonts/Chomsky.otf"),Spooky: require("./assets/fonts/Spooky.otf"),})
            setMyFonts(true);
        } catch (error) {
            alert(
              "Your device was not able to load some of the Mobshed files. Please restart the App or reinstall it"
            );
            setMyFonts(false);
        }
    };
    LoadResourcesAsync();
  },[]);

  useEffect(() => {
    fetch(URL)
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.response;
      })
      .then((response) => {
        setArticles(response);
        console.log(response);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
      });
  },[]);

  if (loading) {
    return <AppLoading />;
  } else {
    return (
        <ImageBackground source={image} style={styles.image}>
          <FlatList
            data={Articles}
            renderItem={renderItem}
            keyExtractor={(item) => item.id}
          />
        </ImageBackground>
      );
  }
};




const styles = StyleSheet.create({
    container: {
      flex: 1,justifyContent: "center",paddingTop: Constants.statusBarHeight,padding: 8,alignItems: "center",},image: {
      flex: 1,resizeMode: "cover",card: {
      height: null,width: "80%",backgroundColor: "white",borderRadius: 15,elevation: 10,padding: 10,header: {
      flexDirection: "row",fontFamily: "Spooky",});

错误：

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消％s。％s（useEffect清理功能）中的所有订阅和异步任务， 在App中（由ExpoRoot创建） 在RCTView中（在NativeAppearance.tsx：4） 在FallbackAppearanceProvider中（位于src / index.tsx：70） 在AppearanceProvider中（由ExpoRoot创建） 在RootErrorBoundary中（由ExpoRoot创建） 在ExpoRoot中（在renderApplication.js：45） 在RCTView中（位于AppContainer.js：109） 在RCTView中（位于AppContainer.js：135） 在AppContainer中（在renderApplication.js：39）

• [本地代码]：__ expoConsoleLog中的null

• console.error中的node_modules \ react-native \ Libraries \ LogBox \ LogBox.js：33：4
registerError中的
• node_modules \ react-native \ Libraries \ YellowBox \ YellowBox.js：197：6
• node_modules \ react-native \ Libraries \ YellowBox \ YellowBox.js：84：8在errorImpl中
console.error中的
• node_modules \ react-native \ Libraries \ YellowBox \ YellowBox.js：63：4
• node_modules \ expo \ build \ environment \ muteWarnings.fx.js：27：4错误
warningwithoutStack中的
• node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：608：6
• noden_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：21972：25 in warnAboutUpdateOnUn MountedFiberInDEV
ScheduleUpdateOnFiber中的
• node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：19813：40
• dispatchAction中的node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：11880：16

• [本地代码]：dispatchAction中为空

tryCatch中的
• node_modules \ regenerator-runtime \ runtime.js：63：36
调用
• node_modules \ regenerator-runtime \ runtime.js：293：29
tryCatch中的
• node_modules \ regenerator-runtime \ runtime.js：63：36
调用
• node_modules \ regenerator-runtime \ runtime.js：154：27
PromiseImpl.resolve.then $ argument_0中的
• node_modules \ regenerator-runtime \ runtime.js：164：18
tryCallOne中的
• node_modules \ promise \ setimmediate \ core.js：37：13
setImmediate $ argument_0中的
• node_modules \ promise \ setimmediate \ core.js：123：24
_callTimer中的
• node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：135：14
_callImmediatesPass中的
• node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：183：16
• callImmediates中的node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：446：30

• [本地代码]：callImmediates中为空

__callImmediates中的
• node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：396：6
__guard $ argument_0中的
• node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：144：6
中的
• node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：373：10
• flushedQueue中的node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：143：4

• [本地代码]：flushedQueue中为空
• [本地代码]：callFunctionReturnFlushedQueue中为空

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）