如何将自定义字体应用于整个项目，Expo React Native

Question

我是 React 和这些语言的新手。尝试将自定义谷歌字体（Ubuntu）应用到整个项目。我设法将字体拉入项目中，但我只能在 App.js 中的简单文本中使用它。像这样：

\n

import React, {useState} from 'react';\nimport './firebase/index';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport { ThemeProvider } from 'react-native-elements';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { BLUE } from './common/colors';\nimport Dashboard from './screens/Dashboard';\nimport Login from './screens/Login';\nimport Accounts from './screens/Accounts';\nimport Cards from './screens/Cards';\nimport Credits from './screens/Credits';\nimport Insurances from './screens/Insurances';\nimport Investments from './screens/Investments';\nimport MoneyTransfers from './screens/MoneyTransfers';\nimport OtherOperations from './screens/OtherOperations';\nimport Payments from './screens/Payments';\n\nimport * as Font from "expo-font";\nimport Apploading from "expo-app-loading";\nimport { StyleSheet, Text, View } from "react-native";\n\n\nconst Drawer = createDrawerNavigator();\n\nconst getFonts = () =>\n  Font.loadAsync({\n    limelight: require("./assets/fonts/Ubuntu-Regular.ttf"),\n    indie: require("./assets/fonts/Ubuntu-BoldItalic.ttf"),\n  });\n\n\nexport default function App() {\n\n  const [fontsloaded, setFontsLoaded] = useState(false);\n  if (fontsloaded){\n    return (\n      <View>\n          <Text \n            style={{ fontFamily: "limelight" }}>\n             Hello World\n          </Text>\n          <Text \n            style={{ fontFamily: "limelight" }}>\n             Hello World\n          </Text>\n          <Text \n            >\n             Hello World\n          </Text>\n          <Text \n            style={{ fontFamily: "indie" }}>\n             Hello World\n          </Text>\n          <Text \n            style={{ fontFamily: "limelight" }}>\n             Hello World\n          </Text>\n          <Text \n            >\n             Hello World\n          </Text>\n          <Text \n            style={{ fontFamily: "indie" }}>\n             Hello World\n          </Text>\n          <Text \n            style={{ fontFamily: "indie" }}>\n             Hello World\n          </Text>\n          <Text \n            >\n             Hello World\n          </Text>\n          <Text \n            >\n             Hello World\n          </Text>\n          <Text \n            style={{ fontFamily: "limelight" }}>\n             Hello World\n          </Text>\n          <Text \n            >\n             Hello World\n          </Text>\n        </View>\n    );\n  }\n  else {\n    return (\n      <Apploading\n        startAsync={getFonts}\n        onFinish={() => {\n          setFontsLoaded(true);\n        }}\n        onError={console.warn}\n      />\n    );\n  }\n  \n}\n

\n

但我使用这些文本只是为了测试。正常情况下，我的代码是这样的，当我尝试使用 ubuntuRegular 字体时，它不起作用。

\n

import React, {useState} from 'react';\nimport './firebase/index';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport { ThemeProvider } from 'react-native-elements';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { BLUE } from './common/colors';\nimport Dashboard from './screens/Dashboard';\nimport Login from './screens/Login';\nimport Accounts from './screens/Accounts';\nimport Cards from './screens/Cards';\nimport Credits from './screens/Credits';\nimport Insurances from './screens/Insurances';\nimport Investments from './screens/Investments';\nimport MoneyTransfers from './screens/MoneyTransfers';\nimport OtherOperations from './screens/OtherOperations';\nimport Payments from './screens/Payments';\n\nimport * as Font from "expo-font";\nimport Apploading from "expo-app-loading";\nimport { StyleSheet, Text, View } from "react-native";\n\n\nconst Drawer = createDrawerNavigator();\n\nconst getFonts = () =>\n  Font.loadAsync({\n    limelight: require("./assets/fonts/Ubuntu-Regular.ttf"),\n    indie: require("./assets/fonts/Ubuntu-BoldItalic.ttf"),\n  });\n\n\nexport default function App() {\n\n  const [fontsloaded, setFontsLoaded] = useState(false);\n  if (fontsloaded){\n    return (\n      <SafeAreaProvider>\n        <ThemeProvider>\n          <NavigationContainer>\n            <Drawer.Navigator\n              drawerType="slide"\n              initialRouteName="Login"\n              screenOptions={{\n                headerShown: true,\n                headerStyle: {\n                  backgroundColor: BLUE,\n                },\n                headerTintColor: '#fff',\n                headerTitleStyle: {\n                  fontWeight: 'bold',\n                  fontFamily: 'ubuntuRegular'\n                },\n              }}\n            >\n              {/* Dashboard a ayri header gecilebilir\n              https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component */}\n              <Drawer.Screen\n                name="Login"\n                component={Login}\n                options={{ headerShown: false, title: 'Login' }}\n              />\n              <Drawer.Screen\n                name="Dashboard"\n                component={Dashboard}\n                options={{ title: 'Anasayfa' }}\n              />\n              <Drawer.Screen\n                name="Accounts"\n                component={Accounts}\n                options={{ title: 'Hesaplar\xc4\xb1m' }}\n              />\n              <Drawer.Screen\n                name="Cards"\n                component={Cards}\n                options={{ title: 'Kartlar\xc4\xb1m' }}\n              />\n              <Drawer.Screen\n                name="Money Transfers"\n                component={MoneyTransfers}\n                options={{ title: 'Para Transferleri' }}\n              />\n              <Drawer.Screen\n                name="Investments"\n                component={Investments}\n                options={{ title: 'Yat\xc4\xb1r\xc4\xb1mlar' }}\n              />\n              <Drawer.Screen\n                name="Payments"\n                component={Payments}\n                options={{ title: '\xc3\x96demeler' }}\n              />\n              <Drawer.Screen\n                name="Credits"\n                component={Credits}\n                options={{ title: 'Krediler' }}\n              />\n              <Drawer.Screen\n                name="Insurances"\n                component={Insurances}\n                options={{ title: 'Sigortalar' }}\n              />\n              <Drawer.Screen\n                name="Other Operations"\n                component={OtherOperations}\n                options={{ title: 'Di\xc4\x9fer \xc4\xb0\xc5\x9flemler' }}\n              />\n            </Drawer.Navigator>\n          </NavigationContainer>\n        </ThemeProvider>\n      </SafeAreaProvider>\n    );\n  }\n  else {\n    return (\n      <Apploading\n        startAsync={getFonts}\n        onFinish={() => {\n          setFontsLoaded(true);\n        }}\n        onError={console.warn}\n      />\n    );\n  }\n  \n}\n

\n

另外，我如何在 App.js 之外使用这种字体，就像我有一个 MenuTitle 组件一样：

\n

import React, {useState} from 'react';\nimport { StyleSheet, Text } from 'react-native';\nimport * as Font from "expo-font";\nimport Apploading from "expo-app-loading";\n\nconst getFonts = () =>\n  Font.loadAsync({\n    limelight: require("../assets/fonts/Ubuntu-Regular.ttf"),\n    indie: require("../assets/fonts/Ubuntu-BoldItalic.ttf"),\n  });\n\nconst MenuTitle = ({ text, textStyles = {} }) => {\n  \n  return <Text style={[styles.title, textStyles]}>{text}</Text>;\n};\n\nexport default MenuTitle;\n\nconst styles = StyleSheet.create({\n  title: {\n    fontSize: 20,\n    fontWeight: 'bold',\n    paddingHorizontal: 20,\n    fontFamily: 'ubuntuRegular'\n  },\n});\n

\n

这也是行不通的。如果您能提供帮助，我会很高兴。

\n

Answer 1

创建一个名为hookswhere your App.jsis located 的文件夹。然后在hooks文件夹内创建一个名为的文件useFonts.js

里面useFonts.js这样写

import * as Font from 'expo-font';

export default useFonts = async () =>
  await Font.loadAsync({
    limelight: require('../assets/fonts/Ubuntu-Regular.ttf'),
    indie: require('../assets/fonts/Ubuntu-BoldItalic.ttf'),
  });

现在你App.js这样写

import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';

import useFonts from './hooks/useFonts';

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

  const LoadFonts = async () => {
    await useFonts();
  };

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

  return <View styles={styles.container}>{/* Rest of the Code Here */}</View>;
}

Answer 2

将 .ttf 添加到 assets/font 后，您是否尝试过执行以下步骤：

• 在项目根目录下创建配置文件react-native.config.js，添加以下代码：

   module.exports = {
       project: {
           ios: {},
           android: {},
       },
       assets: ['./App/assets/fonts'],
   };
  

• 通过运行以下命令链接新添加的资产：

  yarn react-native link 
  

或者

react-native link

如果一切正常，您可以在 android/app/src/main/assets/fonts 中看到新的字体资源（如果是 Android），如果是 iOS，则可以在 Info.plist 中看到更改。

最后，重新运行您的应用程序

之后，您可以将字体样式放入样式文件中，然后在所有项目中使用它们：

bold11: {
    color: Colors.black,
    fontSize: 11,
    fontFamily: 'Roboto-Bold',
},
regular14: {
    color: Colors.black,
    fontFamily: 'Roboto-Regular',
    fontSize: 14,
},