React native 谷歌字体usefont.js文本错误？

我正在用react native做一个项目，但我的expo google字体有问题。我是世博会的新手，所以我基本上不知道如何修复这个bug。这个bug只出现在IOS上（不知道android），在网络上运行良好。该漏洞似乎位于useFonts.js文件中，该文件是expo google字体的一部分

import React from "react";
import { Text, TouchableOpacity, Image, StyleSheet } from "react-native";
import { useFonts, Inter_300Light } from "@expo-google-fonts/inter";
import { DefaultWidth } from "./DefaultWidth";

export default function AppleButton() {
  let [fontsLoaded] = useFonts({ Inter_300Light });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <TouchableOpacity style={styles.appleBtnWrapper}>
      <Image
        style={styles.appleBtnImage}
        source={require("../../../assets/third-party-icon/apple.png")}
      />
      <Text style={styles.appleBtnText}>Fortsæt med Apple</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  appleBtnText: {
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center",
    fontFamily: "Inter_300Light",
    fontSize: 16,
  },
});

我的一个文件使用expo google字体

import React from "react";
import { Text, TouchableOpacity, Image, StyleSheet } from "react-native";
import { useFonts, Inter_300Light } from "@expo-google-fonts/inter";
import { DefaultWidth } from "./DefaultWidth";

export default function AppleButton() {
  let [fontsLoaded] = useFonts({ Inter_300Light });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <TouchableOpacity style={styles.appleBtnWrapper}>
      <Image
        style={styles.appleBtnImage}
        source={require("../../../assets/third-party-icon/apple.png")}
      />
      <Text style={styles.appleBtnText}>Fortsæt med Apple</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  appleBtnText: {
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center",
    fontFamily: "Inter_300Light",
    fontSize: 16,
  },
});

从“React”导入React；
从“react native”导入{文本、TouchableOpacity、图像、样式表}；
从“@expo谷歌字体/Inter”导入{useFonts，inter300light}”；
从“/DefaultWidth”导入{DefaultWidth}；
导出默认函数AppleButton（）{
让[fontsLoaded]=useFonts（{inter300light}）；
如果（！fontsLoaded）{
返回null；
}
返回(
Fortsæt地中海苹果酒店
);
}
const styles=StyleSheet.create({
appleBtnText：{
颜色：“fff”，
fontWeight：“粗体”，
textAlign：“居中”，
fontFamily：“Inter_300Light”，
尺寸：16，
},
});

useFonts.js使用useffect。这些是我得到的bug：

这里是useFonts.js

import { useEffect, useState } from 'react';

import { loadAsync } from 'expo-font';

/**
 * Load a map of custom fonts to use in textual elements.
 * The map keys are used as font names, and can be used with `fontFamily: <name>;`.
 * It returns a boolean describing if all fonts are loaded.
 *
 * Note, the fonts are not "reloaded" when you dynamically change the font map.
 *
 * @see https://docs.expo.io/versions/latest/sdk/font/
 * @example const [loaded, error] = useFonts(...);
 */
export function useFonts(map) {
  let [loaded, setLoaded] = useState(false);
  let [error, setError] = useState(null);

  useEffect(() => {
    loadAsync(map)
      .then(() => setLoaded(true))
      .catch(setError);
  }, []);

  return [loaded, error];
}

从'react'导入{useffect，useState}；
从“expo字体”导入{loadAsync}；
/**
*加载要在文本元素中使用的自定义字体的映射。
*映射键用作字体名称，可与“fontFamily:；”一起使用。
*它返回一个布尔值，描述是否加载了所有字体。
*
*注意，动态更改字体映射时不会“重新加载”字体。
*
*@见https://docs.expo.io/versions/latest/sdk/font/
*@example const[loaded，error]=useFonts（…）；
*/
导出功能useFonts（地图）{
let[loaded，setLoaded]=useState（false）；
let[error，setError]=useState（null）；
useffect（（）=>{
loadAsync（映射）
.然后（（）=>setLoaded（true））
.catch（设置错误）；
}, []);
返回[已加载，错误]；
}

这是我的App.tsx

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import {registerRootComponent} from 'expo'

import Navigation from './routes'

export default function App() {
  return (
    <Navigation/>
  );
}

registerRootComponent(App);

从“世博会状态栏”导入{StatusBar}；
从“React”导入React；
从“expo”导入{RegisterRotComponent}
从“./routes”导入导航
导出默认函数App（）{
返回(
);
}
注册组件（App）；

首先从安装

世博会应用程序加载

然后为您的字体创建一个名为
hooks
的文件夹，其中包含您的
App.js
，并在其中创建一个文件
useFonts.js

在
useFonts.js中，这样写-

import * as Font from "expo-font";
import { Inter_300Light } from "@expo-google-fonts/inter";

export default useFonts = async () => {
  await Font.loadAsync({
    "Inter_300Light": Inter_300Light,
  });
};

您的
App.tsx
应该如下所示

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import {registerRootComponent} from 'expo'
import AppLoading from 'expo-app-loading';
import useFonts from "./hooks/useFonts";

import Navigation from './routes'

export default function App() {
  const [IsReady, SetIsReady] = useState(false);

  const FontLoading = async () => {
    await useFonts(); // Font is being loaded here
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={FontLoading}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return (
    <Navigation/>
  );

  
}

registerRootComponent(App);

import React from "react";
import { Text, TouchableOpacity, Image, StyleSheet } from "react-native";
import { DefaultWidth } from "./DefaultWidth";

export default function AppleButton() {

  return (
    <TouchableOpacity style={styles.appleBtnWrapper}>
      <Image
        style={styles.appleBtnImage}
        source={require("../../../assets/third-party-icon/apple.png")}
      />
      <Text style={styles.appleBtnText}>Fortsæt med Apple</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  appleBtnText: {
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center",
    fontFamily: "Inter_300Light", // Name of the font..Simple
    fontSize: 16,
  },
});

显示
useFonts.js
。它已添加。但这部分代码也来自你的
App.js
的dependencypost。我有一种更好、更有效的加载
字体的方法
@KartikeyVaish done