使用自定義字體反應原生與世博會，每次加載字體

我使用世博會和創造反應原生的應用程序。我喜歡手機上的直播/熱點重新加載功能，但我很想知道自定義字體。使用自定義字體反應原生與世博會，每次加載字體

https://docs.expo.io/versions/v17.0.0/guides/using-custom-fonts.html#loading-the-font-in-your-app

世博會的API只有方向異步加載它們。我是否需要在我想要自定義字體的每個組件上執行此操作？這似乎是我已經加載一次會導致一些不必要的調用。

有沒有辦法將字體設置爲全局或通過加載後通過道具傳遞它？這似乎是他們建議在該鏈接通過他們的最後一行這種方法：

注：通常你會希望加載應用之前顯示的應用程序，以避免文本的字體加載後閃爍初級字體。建議的方法是將Font.loadAsync調用移動到您的頂級組件。

......但他們沒有解釋如何做到這一點，如果這就是他們所暗示的。

所以我的問題是：

1）是否在加載多次自定義字體（每個組件），會導致性能問題？（或者它可能在第一次之後從高速緩存中拉出來）

2）加載後可以通過屬性傳遞字體，或將其設置爲全局？

最後是

3）這是世博會唯一的問題嗎？還是一個創建反應原生應用程序唯一的問題？或者只是一個livereload/hotloading問題？

另外請注意，我的工作在Windows/Android的

來源

2017-06-01 Organiccat

好吧，所以我對世博會及其與反應本土的關係有點困惑。看起來模塊構建在反應原生的基礎之上，使得一些事情變得更容易，但其他變得更加困難。這種權衡是爲了讓開發人員編寫更多的JS並從本地代碼的「雜草」中解脫出來。所以，答案＃3，這是一個世博會唯一的問題。我不確定它是否真的會提高性能，或者如果你可以傳遞它，讓＃1和＃2仍然打開... – Organiccat

1）您應該只加載字體一次。正如你指出的那樣，世博會建議將Font.loadAsync方法放在頂級組件的componentDidMount（）方法中。

您所指的性能問題可能是異步調用背後發生的魔法 - 但是，這應該只發生一次。

2）從那時起，您可以使用<Text>上的「fontFamily」屬性在任何子組件中使用該字體。作爲他們的示例（我稍微修改）顯示：

首先將字體加載到頂級組件中。

export default class App extends React.Component { 
    componentDidMount() { 
    Font.loadAsync({ 
     'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'), 
    }); 
    } 

    render() { 
    return (
     <HelloWorld /> 
    ) 
    } 
}

然後在應用程序的任何組件中使用它。（在字體加載之前，你會看到系統字體 - iOS上的舊金山，Android上的Roboto。這就是世博會建議設置加載狀態的原因......以避免系統字體和新加載的自定義字體之間閃爍不定。）

export default class HelloWorld extends React.Component { 
    render() { 
    <Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}> 
     Hello, world! 
    </Text> 
    } 
}

3）這是一種世博會相關的「問題」（或解決方案...取決於你如何看待它）。例如，在iOS上，添加自定義字體涉及多個步驟（將字體文件添加到您的本地項目，確保字體顯示在您的Bundle資源中，將字體添加到Info.plist ...）。不知道Android的流程是什麼，但它有些不同，可能也很煩人。

世博會已經將他們的Font模塊抽象出來，它允許你做一件事 - 並且跨平臺獲得相同的結果。在我的書中這很酷。

來源

2017-07-07 03:18:28 bayyar

我最終沒有使用它。雖然我確實需要爲iOS和Android定製解決方案，但我感覺他們的工作更好，更全球化。我的寵物是我正在編寫專門針對世博會的代碼，而不是與應用相關的代碼。此外，我從來沒有得到子組件來正確地繼承它。 – Organiccat

使用自定義字體反應原生與世博會，每次加載字體

回答

相關問題