问题：

如何将自定义字体应用于整个项目，展览反应原生

缪英锐

2023-03-14

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

import React, {useState} from 'react';
import './firebase/index';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ThemeProvider } from 'react-native-elements';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { BLUE } from './common/colors';
import Dashboard from './screens/Dashboard';
import Login from './screens/Login';
import Accounts from './screens/Accounts';
import Cards from './screens/Cards';
import Credits from './screens/Credits';
import Insurances from './screens/Insurances';
import Investments from './screens/Investments';
import MoneyTransfers from './screens/MoneyTransfers';
import OtherOperations from './screens/OtherOperations';
import Payments from './screens/Payments';

import * as Font from "expo-font";
import Apploading from "expo-app-loading";
import { StyleSheet, Text, View } from "react-native";


const Drawer = createDrawerNavigator();

const getFonts = () =>
  Font.loadAsync({
    limelight: require("./assets/fonts/Ubuntu-Regular.ttf"),
    indie: require("./assets/fonts/Ubuntu-BoldItalic.ttf"),
  });


export default function App() {

  const [fontsloaded, setFontsLoaded] = useState(false);
  if (fontsloaded){
    return (
      <View>
          <Text 
            style={{ fontFamily: "limelight" }}>
             Hello World
          </Text>
          <Text 
            style={{ fontFamily: "limelight" }}>
             Hello World
          </Text>
          <Text 
            >
             Hello World
          </Text>
          <Text 
            style={{ fontFamily: "indie" }}>
             Hello World
          </Text>
          <Text 
            style={{ fontFamily: "limelight" }}>
             Hello World
          </Text>
          <Text 
            >
             Hello World
          </Text>
          <Text 
            style={{ fontFamily: "indie" }}>
             Hello World
          </Text>
          <Text 
            style={{ fontFamily: "indie" }}>
             Hello World
          </Text>
          <Text 
            >
             Hello World
          </Text>
          <Text 
            >
             Hello World
          </Text>
          <Text 
            style={{ fontFamily: "limelight" }}>
             Hello World
          </Text>
          <Text 
            >
             Hello World
          </Text>
        </View>
    );
  }
  else {
    return (
      <Apploading
        startAsync={getFonts}
        onFinish={() => {
          setFontsLoaded(true);
        }}
        onError={console.warn}
      />
    );
  }
  
}

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

import React, {useState} from 'react';
import './firebase/index';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ThemeProvider } from 'react-native-elements';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { BLUE } from './common/colors';
import Dashboard from './screens/Dashboard';
import Login from './screens/Login';
import Accounts from './screens/Accounts';
import Cards from './screens/Cards';
import Credits from './screens/Credits';
import Insurances from './screens/Insurances';
import Investments from './screens/Investments';
import MoneyTransfers from './screens/MoneyTransfers';
import OtherOperations from './screens/OtherOperations';
import Payments from './screens/Payments';

import * as Font from "expo-font";
import Apploading from "expo-app-loading";
import { StyleSheet, Text, View } from "react-native";


const Drawer = createDrawerNavigator();

const getFonts = () =>
  Font.loadAsync({
    limelight: require("./assets/fonts/Ubuntu-Regular.ttf"),
    indie: require("./assets/fonts/Ubuntu-BoldItalic.ttf"),
  });


export default function App() {

  const [fontsloaded, setFontsLoaded] = useState(false);
  if (fontsloaded){
    return (
      <SafeAreaProvider>
        <ThemeProvider>
          <NavigationContainer>
            <Drawer.Navigator
              drawerType="slide"
              initialRouteName="Login"
              screenOptions={{
                headerShown: true,
                headerStyle: {
                  backgroundColor: BLUE,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                  fontWeight: 'bold',
                  fontFamily: 'ubuntuRegular'
                },
              }}
            >
              {/* Dashboard a ayri header gecilebilir
              https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component */}
              <Drawer.Screen
                name="Login"
                component={Login}
                options={{ headerShown: false, title: 'Login' }}
              />
              <Drawer.Screen
                name="Dashboard"
                component={Dashboard}
                options={{ title: 'Anasayfa' }}
              />
              <Drawer.Screen
                name="Accounts"
                component={Accounts}
                options={{ title: 'Hesaplarım' }}
              />
              <Drawer.Screen
                name="Cards"
                component={Cards}
                options={{ title: 'Kartlarım' }}
              />
              <Drawer.Screen
                name="Money Transfers"
                component={MoneyTransfers}
                options={{ title: 'Para Transferleri' }}
              />
              <Drawer.Screen
                name="Investments"
                component={Investments}
                options={{ title: 'Yatırımlar' }}
              />
              <Drawer.Screen
                name="Payments"
                component={Payments}
                options={{ title: 'Ödemeler' }}
              />
              <Drawer.Screen
                name="Credits"
                component={Credits}
                options={{ title: 'Krediler' }}
              />
              <Drawer.Screen
                name="Insurances"
                component={Insurances}
                options={{ title: 'Sigortalar' }}
              />
              <Drawer.Screen
                name="Other Operations"
                component={OtherOperations}
                options={{ title: 'Diğer İşlemler' }}
              />
            </Drawer.Navigator>
          </NavigationContainer>
        </ThemeProvider>
      </SafeAreaProvider>
    );
  }
  else {
    return (
      <Apploading
        startAsync={getFonts}
        onFinish={() => {
          setFontsLoaded(true);
        }}
        onError={console.warn}
      />
    );
  }
  
}

此外，如何在应用程序之外使用此字体。js就像我有一个菜单组件：

import React, {useState} from 'react';
import { StyleSheet, Text } from 'react-native';
import * as Font from "expo-font";
import Apploading from "expo-app-loading";

const getFonts = () =>
  Font.loadAsync({
    limelight: require("../assets/fonts/Ubuntu-Regular.ttf"),
    indie: require("../assets/fonts/Ubuntu-BoldItalic.ttf"),
  });

const MenuTitle = ({ text, textStyles = {} }) => {
  
  return <Text style={[styles.title, textStyles]}>{text}</Text>;
};

export default MenuTitle;

const styles = StyleSheet.create({
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    paddingHorizontal: 20,
    fontFamily: 'ubuntuRegular'
  },
});

同样，这也不起作用。如果你能帮忙，我会很高兴的。

共有3个答案

太叔弘壮

2023-03-14

在将. ttf添加到资产/字体后，您是否尝试过遵循这些步骤：

在根项目目录中创建一个配置文件react-native.config.js并添加下面的代码：

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

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

yarn react-native link

或

react-native link

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

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

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

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

魏书

2023-03-14

将字体资源添加到项目文件夹exp资产/字体
创建可变字体exp定制字体
这样App.js导入

import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
let customFonts = {
  'Poppins-Black': require('./assets/fonts/Poppins-Black.ttf')
};

const App = () => {
  const [isLoaded] = useFonts(customFonts);
  if (!isLoaded) {
    return <AppLoading />;
  }
    return <RootApp />;
}

龙晟睿

2023-03-14

在< code>App.js所在的位置创建一个名为< code>hooks的文件夹。然后在< code>hooks文件夹中创建一个名为< code>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'),
  });

现在在你的应用程序中.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>;
}

类似资料：

整个应用程序的自定义字体

我想更改整个应用程序组件（文本视图、编辑文本、按钮等）的字体。我发现我可以为应用程序设置样式，但在这里我无法将字体从资产文件夹放入自定义样式xml。我必须将我的自定义TTF字体从资产文件夹放到样式xml中的typeface元素中。我无法将单空间字体更改为自定义字体。我的风格是
如何在Android中为整个应用程序设置自定义字体？

是否可以在Android应用程序中设置自定义字体？我尝试了这里发布的内容，但我不知道我的扩展应用程序类在哪里。。。有什么帮助吗？编辑：我尝试了以下方法：添加一个资产文件夹并将字体插入其中，如下所示： > 从我的调用这个新类。我选择了我的风格并添加了它。 MyApp。java： AndroidManifest。xml：样式。xml：但我的字体还是不是长宁。。。有什么想法吗？然后调用
对整个iOS应用程序使用自定义字体swift

问题内容：我知道，只需在屏幕上设置元素的自定义字体即可。我想知道如何使用swift为整个应用程序设置它。（破解将是针对应用程序的每个元素执行我所知道的操作，但这只会成为可维护性的噩梦）我看到这个问题已经用Objective-C标签问过，如何在不指定大小的情况下为整个iOS应用设置自定义字体，但我对Objective-C不够熟悉，不足以将代码移植到Swift 问题答案：您可以设置UILabe
如何在android库项目中使用自定义字体？

我创建了一个TextView库项目，其中我使用了自定义字体。我必须创建这个库，因为这个也将在其他三个项目中使用。我发现android库项目不支持资产/字体文件夹。如果我以这种方式使用，它会给我错误消息这里是否有解决此问题的方法。另外，我必须在三个不同的应用程序中使用重复视图。还有我用来从library assets文件夹中获取字体的示例代码。
如何在Rails应用中添加自定义字体？

问题内容：我想在RoR应用程序中使用几种字体，但是它们的格式主要是.ttf和.otf等。我该如何将这些文件嵌入我的Rails应用程序？即，一旦将它们放入资产文件夹中，将它们嵌入到CSS和/或LESS文件中的语法到底是什么？编辑：这是我现在拥有的代码：它似乎对我不起作用。Rails控制台中的输出类似于以下内容：使用Firebug检查页面时会说：问题答案：较大的示例，假设它们直接在资产目录
如何调整字体大小以适应Android版原生反应中的视图？

如何在react native的视图中自动改变文本的字体大小？我有不同长度的文本，其中一些不适合视图，所以减小了字体大小。我已经检查了文档，发现了这个，但它只适用于iOS，我需要它用于Android。它与其他组件（如按钮和触摸不透明度）一起工作吗？

如何将自定义字体应用于整个项目，展览反应原生

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档