blocks|key|77326|text|是。您没有注意到调用是Font.loadAsync()。这意味着它加载asynchronously.比如:这需要一段时间。在加载字体之前，您无法呈现UI。您需要按照以下思路做一些事情：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|77327|import+{+AppLoading,+Font+}+from+'expo'

state+=+{
++++fontsLoaded:+false,
++++...
}

componentWillMount()+{
++++Font.loadAsync(+{
++++++++++++'Lobster':+require('./assets/fonts/Lobster-Regular.ttf')
++++++++}
++++).then(+()+=>+this.setState(+{+fontsLoaded:+true+}+)+)
}

render()+{
++++if(+!this.state.fontsLoaded+)+{
++++++++return+<AppLoading/>
++++}

++++return+(
++++++++...
++++)
}|code-block|syntax|javascript|77328|entityMap^0|B|G|Z|E|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|S|8|@]|E|@]|F|$J|K]]|$1|L|3|-4|5|6|7|T|8|@]|E|@]|F|$]]]|M|$]]

Yes. You are missing that the call is <code>Font.loadAsync()</code>. This means that it loads asynchronously. As in: It takes a while. You can't render the UI until the font has loaded. You need to do something along these lines: 

<pre><code>import { AppLoading, Font } from 'expo'

state = {
 fontsLoaded: false,
 ...
}

componentWillMount() {
 Font.loadAsync( {
 'Lobster': require('./assets/fonts/Lobster-Regular.ttf')
 }
 ).then( () =&gt; this.setState( { fontsLoaded: true } ) )
}

render() {
 if( !this.state.fontsLoaded ) {
 return &lt;AppLoading/&gt;
 }

 return (
 ...
 )
}
</code></pre>

blocks|key|2801718|text|**无状态函数中的react-native字体**|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2801719|2801720|2801721|import+*+as+Font+from+'expo-font';
import+{+AppLoading+}+from+'expo';|code-block|syntax|javascript|2801722|2801723|2801724|//+fetchFonts+from+local+files+type+ttf+
const+fetchFonts+=+()+=>+{
++return+Font.loadAsync({
++'PacificoRegular':+require('../assets/Pacifico/Pacifico-Regular.ttf'),
++});
++};|2801725|2801726|+*step3:使用状态*|blockquote|2801727|2801728|2801729|//+state+font+fetch+control+
const+[fontloaded,setfontloaded]=useState(false);|2801730|2801731|+**step4:使用加载的app+**|2801732|2801733|2801734|if(!fontloaded){
++return(
++++<AppLoading
++++startAsync={fetchFonts}
++++onFinish={()=>{setfontloaded(true)}}
++++onError={console.warn}/>
++)
}|2801735|2801736|2801737|txt:{
padding:5,
fontSize:18,
fontFamily:+'PacificoRegular',
+}|2801738|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|C|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1F|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|V|3|W|5|P|7|1K|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Z|3|10|5|F|7|1N|8|@]|9|@]|A|$G|H]]|$1|11|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|13|3|14|5|F|7|1Q|8|@]|9|@]|A|$G|H]]|$1|15|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|16|$]]

** react-native font in stateless function **

<blockquote>
 **step:1 import font from expo **
</blockquote>

<pre><code>import * as Font from 'expo-font';
import { AppLoading } from 'expo';
</code></pre>

<blockquote>
 *step2: require font from files *
</blockquote>

<pre><code>// fetchFonts from local files type ttf 
const fetchFonts = () =&gt; {
 return Font.loadAsync({
 'PacificoRegular': require('../assets/Pacifico/Pacifico-Regular.ttf'),
 });
 };
</code></pre>

<blockquote>
<pre><code>*****step3:use state *****
</code></pre>
</blockquote>

<pre><code>// state font fetch control 
const [fontloaded,setfontloaded]=useState(false);
</code></pre>

<blockquote>
 **step4: use app loaded **
</blockquote>

<pre><code>if(!fontloaded){
 return(
 &lt;AppLoading
 startAsync={fetchFonts}
 onFinish={()=&gt;{setfontloaded(true)}}
 onError={console.warn}/&gt;
 )
}
</code></pre>

<blockquote>
 **step5:style font **
</blockquote>

<pre><code>txt:{
padding:5,
fontSize:18,
fontFamily: 'PacificoRegular',
 }
</code></pre>

blocks|key|79081|text|安装+expo-font+包，因为有时expo+-font版本与您的expo版本不兼容，因此，|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|79082|第1步：|79083|expo+install+expo-font|code-block|syntax|javascript|79084|第2步：|79085|class+App+extends+React.Component+{
++state+=+{
++++fontLoaded:+false,
++};

++componentDidMount()+{
++++this.loadAssetsAsync();
++}

++async+loadAssetsAsync()+{
++++await+Font.loadAsync({
++++++//+Load+a+font+`Montserrat`+from+a+static+resource
++++++MuseoSans500:+require("./assets/fonts/museosans_500-webfont.ttf"),
++++++MuseoSans700:+require("./assets/fonts/museosans_700-webfont.ttf"),
++++});
++++this.setState({+fontLoaded:+true+});
++}

++render()+{
++++if+(!this.state.fontLoaded)+{
++++++return+null;+//+render+some+progress+indicator
++++}
++++return+<AnyComponent+/>;
++}
}|79086|entityMap^0|2|B|0|0|4|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

install expo-font package from expo CLI because sometime expo-font version is not compatible with your expo version so,

step 1:

<pre><code>expo install expo-font
</code></pre>

step 2:

<pre><code>class App extends React.Component {
 state = {
 fontLoaded: false,
 };

 componentDidMount() {
 this.loadAssetsAsync();
 }

 async loadAssetsAsync() {
 await Font.loadAsync({
 // Load a font `Montserrat` from a static resource
 MuseoSans500: require("./assets/fonts/museosans_500-webfont.ttf"),
 MuseoSans700: require("./assets/fonts/museosans_700-webfont.ttf"),
 });
 this.setState({ fontLoaded: true });
 }

 render() {
 if (!this.state.fontLoaded) {
 return null; // render some progress indicator
 }
 return &lt;AnyComponent /&gt;;
 }
}


</code></pre>

blocks|key|2801779|text|useEffect(()=>{
++++async+function+loadFonts(){
++++++await+Font.loadAsync({
++++++++'Montserrat':+require("./assets/fonts/Montserrat/Montserrat-Regular.ttf"),
++++++++'Montserrat-SemiBold':+require('./assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
++++++++'Montserrat-Bold':+require('./assets/fonts/Montserrat/Montserrat-Bold.ttf'),
++++++++'Fascinate':+require('./assets/fonts/Fascinate/Fascinate-Regular.ttf')
++++++}).then(res=>{
++++++++console.log("FONTS+LOADED!");
++++++++setLoaded(true)
++++++}).catch(Err=>{
++++++++setLoaded(true);
++++++++console.log(Err);
++++++});+
++++}

++++loadFonts();
++},[])|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2801780|在您的App.js文件中使用此useEffect加载，加载后，字体可在您的expo或react原生项目中的任何位置使用|unstyled|2801781|const+Heading+=+(color)+=>+{
++++return({fontSize:45*fontScale,+fontFamily:+"Montserrat-SemiBold",+color,+marginTop:+-10,+marginLeft:+InitialMargin,+letterSpacing:+4})
}|2801782|2801783|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|N|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|F|7|P|8|@]|9|@]|A|$]]]|K|$]]

<pre><code>useEffect(()=&gt;{
 async function loadFonts(){
 await Font.loadAsync({
 'Montserrat': require(&quot;./assets/fonts/Montserrat/Montserrat-Regular.ttf&quot;),
 'Montserrat-SemiBold': require('./assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
 'Montserrat-Bold': require('./assets/fonts/Montserrat/Montserrat-Bold.ttf'),
 'Fascinate': require('./assets/fonts/Fascinate/Fascinate-Regular.ttf')
 }).then(res=&gt;{
 console.log(&quot;FONTS LOADED!&quot;);
 setLoaded(true)
 }).catch(Err=&gt;{
 setLoaded(true);
 console.log(Err);
 }); 
 }

 loadFonts();
 },[])
</code></pre>
Load using this useEffect in your App.js file, once loaded the fonts can be used anywhere in your expo or react-native project
<pre><code>const Heading = (color) =&gt; {
 return({fontSize:45*fontScale, fontFamily: &quot;Montserrat-SemiBold&quot;, color, marginTop: -10, marginLeft: InitialMargin, letterSpacing: 4})
}
</code></pre>
Make sure you are not using the style fontWeight, as it will override the fontStyle and will not apply the fontFamily to your Text.

blocks|key|77516|text|Font.loadAsync很旧，并且被证明存在不可预知的问题。现在，expo已经推出了新的解决方案here|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|77517|所以正确的代码现在是：|77518|import+{useFonts}+from+'expo-font';
import+AppLoading+from+"expo-app-loading";

let+[fontsLoaded]+=+useFonts({
++++++'Lobster':+require('./assets/fonts/Lobster-Regular.ttf'),
++++});
++++if+(!fontsLoaded)+{
++++++++return+<AppLoading/>;
++++}
...|code-block|syntax|javascript|77519|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.expo.io/guides/using-custom-fonts/^0|1E|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Font.loadAsync is old and proved to have unpredictable problems. now expo have rolled out new solutions <a href="https://docs.expo.io/guides/using-custom-fonts/" rel="nofollow noreferrer">here</a>
so the correct code is now:
<pre><code>import {useFonts} from 'expo-font';
import AppLoading from &quot;expo-app-loading&quot;;

let [fontsLoaded] = useFonts({
 'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
 });
 if (!fontsLoaded) {
 return &lt;AppLoading/&gt;;
 }
...
</code></pre>

I'm using React Native with Expo, and it is all going well except for this one issue with custom fonts. I have my font <code>Lobster-Regular.ttf</code>in ./assets/fonts, and I have been trying to load it as seen in the official docs: 

<pre><code>componentDidMount() {

 Font.loadAsync({

 'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
 });

 }
</code></pre>

I then style my header as such:

<pre><code> headerText: {
 color: 'white',
 fontSize: 30,
 fontFamily: 'Lobster'
 }, 
</code></pre>

All I get is 

<blockquote>
 fontFamily 'Lobster' is not a system font and has not been loaded
 through Font.loadAsync.
 
 <ul>
 <li>If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.</li>
 <li>If this is a custom font, be sure to load it with Font.loadAsync.</li>
 </ul>
</blockquote>

Am I missing something?

Can't seem to load custom fonts with Expo's Font.loadAsync

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用React Native和Expo，除了这个自定义字体的问题之外，一切都进行得很好。我将我的字体Lobster-Regular.ttf放在./assets/fonts中，并且我一直在尝试加载它，如官方文档中所示：componentDidMount() {    Font.loadAsync({      'L...

问无法使用世博会的Font.loadAsync加载自定义字体
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使用世博会的Font.loadAsync加载自定义字体EN