react-native - 无法在应用程序的其他部分通过 expo 使用谷歌自定义字体

问题描述

我正在我的文件中加载带有 expo 的谷歌自定义字体，App.js如下所示：

;

import {
  useFonts,
  Poppins_300Light,
  Poppins_400Regular,
  Poppins_400Regular_Italic
} from "@expo-google-fonts/poppins";

export default function App() {
  const [auth, setAuth] = useState(false);

  const [loading, setLoading] = useState(true);
  let [fontsLoaded] = useFonts({
    "Poppins-Light": Poppins_300Light,
    "Poppins-Regular": Poppins_400Regular,
    "Poppins-Regular-Italic": Poppins_400Regular_Italic,
    
  });

  useEffect(() => {
    (async () => {
      // Check if user is logged in
      const token = await getKey("access_token");
      if (token) {
        setAuth(true);
      }
    })();
    setLoading(false);
  }, []);

  if (loading || !fontsLoaded) {
    return <AppLoading />;
  }

  

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Camera"
       
      >
        {!auth ? (
          <>
            <Stack.Screen
              name="Analytics"
              component={Analytics}
             
            />
            <Stack.Screen
              name="Settings"
              component={Settings}

            />
           
          </>
        ) : (
          <>
            <Stack.Screen
              name="Login"
              component={Login}

            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

现在，当我尝试font-family: Poppins-Light在我的Login.js文件中使用时，我得到了错误Unrecognized font family "Poppins-Light"

不知道发生了什么。我认为我加载的方式可能有问题，此外，我如何将字体导入到我的Login文件中。

我也在使用样式化的组件，所以我不确定这是否有任何影响。

这是我的包 JSON

"dependencies": {
    "@expo-google-fonts/inter": "^0.1.0",
    "@expo-google-fonts/poppins": "^0.1.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.8",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "expo": "~40.0.1",
    "expo-app-loading": "^1.0.1",
    "expo-camera": "~9.1.0",
    "expo-constants": "~9.3.3",
    "expo-font": "~8.4.0",
    "expo-haptics": "~8.4.0",
    "expo-jwt": "^1.4.0",
    "expo-linear-gradient": "~8.4.0",
    "expo-secure-store": "~9.3.0",
    "expo-sqlite": "~8.5.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-dotenv": "^2.5.3",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-global-props": "^1.1.5",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.2",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-unimodules": "^0.12.0",
    "react-native-web": "~0.13.12",
    "react-swipeable-views-native": "^0.13.2",
    "styled-components": "^5.2.1"
  },

这就是我在Channels.js文件中使用它的方式


 <HeaderTitle style={{ fontFamily: "Poppins-Light" }}>
          Channels
        </HeaderTitle>

这是我尝试访问该页面时的错误：

知道我做错了什么吗？

您的帮助将不胜感激。

标签： react-nativeexpo

react-native - 无法在应用程序的其他部分通过 expo 使用谷歌自定义字体

问题描述

解决方案

推荐阅读