我不能自定义试剂的字体与博览会反应原生？

Question

我的项目是 clojureScript 试剂的 react native with expo，我需要自定义字体。我已经阅读了 expo 关于如何自定义字体的文档，并尝试按照 ClojureScript 方式的说明进行操作。

(expo自定义字体说明 https://docs.expo.io/versions/latest/guides/using-custom-fonts)

1. 异步加载字体，这是加载异步函数

   (defn load-font-async
    [name url]
    (.call (aget Font "loadAsync")
      Font
      (js-obj "Kanit" url)))
   

2. 在渲染之前调用加载异步函数。

   (->
    (expo/load-font-async "Kanit" (js/require "./assets/fonts/Kanit/Kanit-Regular.ttf"))
    (.then (fn [] (.registerComponent app-registry "main" #(r/reactify-component app-root))))))
   

   ps。将所有应用程序仅用于字体加载并不好，但我只需要确保字体已经加载。 （我需要重构）

3. 我将字体家族样式放到文本组件中

   [text {:style {:font-family "Kanit"}} "test"]
   

但文本组件找不到我已经声明和加载的字体系列“Kanit”。错误是

 Unrecognized font family 'Kanit'

我现在一无所知，这个解决方案有什么问题？

ps。如果您需要更多信息，请告诉我，感谢所有回复:)

更新：根据 Chris Callwait 的建议，我将 expo/load-font-async 移至 app-root 并调度告诉文本组件，仅在加载字体时附加字体系列。像这样

(defn app-root []
  (let [ ... ]
  (expo/load-font-async [{"Kanit" (js/require "./assets/fonts/Kanit/Kanit-Regular.ttf")}]
    (rf/dispatch [:app/set-font-loaded true]))
  (r/create-class {:reagent-render ..... }))))

它仍然有同样的错误:( .

Answer 1

检查这个解决方案，它使用 Promise.All 来调用 Font.loadAsync 并一次加载多种字体。

(defn- cache-fonts [fonts]
  (for [font fonts]
    (when font
      (.loadAsync Font font))))

(defn- cast-as-array [coll]
  (if (or (array? coll)
          (not (reduceable? coll)))
    coll
    (into-array coll)))

(defn all [coll]
  (.all js/Promise (cast-as-array coll)))

(defn load-fonts [fonts cb]
  (->
    (all (cache-fonts (clj->js fonts)))
    (.then (fn [resp]
             (if cb (cb))))
    (.catch (fn [err]
              (println "Loading font failed: " (aget err "message"))))))


(load-fonts [{"Kanit" (js/require "./assets/fonts/Kanit/Kanit-Regular.ttf")}]
            (println "Font success loaded"))

我的初始化：

(defn app-root []
  (let [...]
    (load-fonts ...)
    (fn []
      ...)))

(defn init []
  (.registerComponent app-registry "main" #(r/reactify-component app-root)))