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

我是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}
/>
);
}

}

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

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'
},
});

这也不工作。如果你能帮忙，我会很高兴的。

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

添加字体资源到项目文件夹exp assets/fonts
创建变量字体exp customFonts
像这样导入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 />;
}

App.js

export default class App extends React.Component{
constructor(props) {
super(props)
this.state = {
fontsLoaded: false,
}
}
async loadFont(){
await Font.loadAsync({
'ABeeZee-Italic' : require('./assets/fonts/ABeeZee-Italic.ttf'),
'ABeeZee-Regular' : require('./assets/fonts/ABeeZee-Regular.ttf'),
});
this.setState({fontsLoaded:true});
}
componentDidMount(){
this.loadFont();
}
render(){
if(this.state.fontsLoaded)
return Your_Component;
else
return AppLoading_Component;
}

添加如上所示的代码，然后您可以在任何页面上使用如下所示的字体。

<Text style={{fontFamily: 'ABeeZee-Regular'}}> This is ABeeZee Regular Font</Text>

您是否尝试过在assets/font:

中添加。ttf后遵循这些步骤?

在根项目目录下创建一个配置文件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中看到新的字体资源，并在Info中看到更改。

最后，重新运行你的应用

之后，你可以把你的字体样式放在一个样式文件中，然后在你的所有项目中使用它们:

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

使用Expo，您通常有两种不同的方式将自定义字体应用到您的项目中:

第一个是使用@expo-google-fonts/*包。只需像这样安装包:

yarn add @expo-google-fonts/Montserrat(安装Montserrat字体)

然后在你的代码中，

import React from "react";
import { View, Text } from "react-native";
import {
useFonts,
Montserrat_400Regular,
Montserrat_400Regular_Italic,
Montserrat_900Black,
} from "@expo-google-fonts/montserrat";
import AppLoading from "expo-app-loading";
export default function App() {
const [loadedFonts] = useFonts({
Regular: Montserrat_400Regular,
Italic: Montserrat_400Regular_Italic,
Black: Montserrat_900Black,
});
if (!loadedFonts) {
return <AppLoading />;
}
return (
<View style={{ flex: 1, justifyContent: "center" }}>
<Text style={{ fontFamily: "Regular", fontSize: 32 }}>Hello</Text>
</View>
);
}

使用此目录获取更多帮助:https://directory.vercel.app/

useFont钩子处理Font.loadAsync逻辑，如其他答案所示。

第二种方法涉及在本地导入字体。一样,

import React from "react";
import { View, Text } from "react-native";
import { useFonts } from "expo-font";
import AppLoading from "expo-app-loading";
export default function App() {
const [loadedFonts] = useFonts({
Regular: require("./assets/fonts/Montserrat-Regular.ttf"),
});
if (!loadedFonts) {
return <AppLoading />;
}
return (
<View style={{ flex: 1, justifyContent: "center" }}>
<Text style={{ fontSize: 32, fontFamily: "Regular" }}>Hello</Text>
</View>
);
}

轻微的注意:

如果你使用的是最新的SDK 45, expo-app-loading已被弃用，应该替换为expo-splash-screen。世博手册会帮你的。

使用字体。如果你不想使用usefontts钩子，

(for example, maybe you prefer class components), you can use Font.loadAsync directly. Under the hood, the hook uses Font.loadAsync from the expo-font library. You can use it directly if you prefer, or if you want to have more fine-grained control over when your fonts are loaded before rendering.
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Font from 'expo-font';

let customFonts = {
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
};

export default class App extends React.Component {
state = {
fontsLoaded: false,
};

async _loadFontsAsync() {
await Font.loadAsync(customFonts);
this.setState({ fontsLoaded: true });
}

componentDidMount() {
this._loadFontsAsync();
}

render() {
if (!this.state.fontsLoaded) {
return null;
}

return (
<View style={styles.container}>
<Text style={{ fontFamily: 'Inter-Black', fontSize: 30 }}>Inter Black</Text>
<Text style={{ fontFamily: 'Inter-SemiBoldItalic', fontSize: 30 }}>
Inter SemiBoldItalic
</Text>
<Text style={{ fontSize: 30 }}>Platform Default</Text>
</View>
);
}
}

const styles = StyleSheet.create({ ... });

对于expo，您可以直接使用'expo- Google -fonts'库。

安装

使用Google字体

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useFonts, Inter_900Black } from '@expo-google-fonts/inter';
export default function App() {
let [fontsLoaded] = useFonts({
Inter_900Black,
});
if (!fontsLoaded) {
return null;
}
return (
<View style={styles.container}>
<Text style={{ fontFamily: 'Inter_900Black', fontSize: 40 }}>Inter Black</Text>
</View>
);
}

更多帮助请访问世博文档世博谷歌字体

轻微的注意:

使用字体。如果你不想使用usefontts钩子，

相关内容

最新更新

热门标签：