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

React Native

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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