react native custom fonts下載 - react native custom fonts源代碼下載

react native custom fonts

字體下載

1.0.0

下載

反應新的custom-fonts

使用通過網絡位置指定的動態字體，而不是在本機構建中管理它們！

反應新的custom-fonts

入門

> = 0.60.0

yarn add react-native-custom-fonts # or npm install --save react-native-custom-fonts

然後重建您的應用程序。在iOS上，一定要在應用程序/ios目錄中pod install CocoApods。

<= 0.59.x

使用yarn ：

yarn add react-native-custom-fonts
react-native link react-native-custom-fonts

打破變化

<1.2.0
- 我們添加了一堆穩定性的改進，並遷移到了新的基於鉤子的API。
- fontFaces Array Prop已變成fontFaces對象，其鍵是您要在應用程序中引用的字體樣式的名稱。
- 要使用fontFace ，必須在呼叫useCustomFont(name:String)中指定名稱。

✍️示例

請查看示例項目以進行完整的演示。只需cd進入目錄，使用npm或yarn安裝依賴項，然後使用以下內容執行應用程序：

react-native run-android # run on android
react-native run-ios     # run on ios

簡單的

 import React from "react" ;
import PropTypes from "prop-types" ;
import { View , Text } from "react-native" ;
import CustomFontsProvider , { useCustomFont } from "react-native-custom-fonts" ;

const fontFaces = {
  // XXX: Specify the local name of your font. You'll use this to refer to it via the useCustomFont hook.
  'UbuntuBold' : {
    uri : 'https://github.com/google/fonts/raw/master/ufl/ubuntu/Ubuntu-Bold.ttf' ,
    fontFamily : 'Ubuntu' ,
    fontWeight : 'bold' ,
    // XXX: You can also specify additional font styling.
    color : 'blue' ,
  } ,
} ;

const SomeComponent = ( ) => {
  // Fetch the desired font by name. When the font has been cached, it will automatically update the View.
  const { ... fontProps } = useCustomFont ( 'UbuntuBold' ) ;
  return (
    < Text
      { ... fontProps }
      children = "Hello, world!"
    />
  ) ;
} ;

export default ( ) => (
  < CustomFontsProvider
    fontFaces = { fontFaces }
  >
    < SomeComponent />
  </ CustomFontsProvider >
) ;

我的裁判在哪裡？

react-native-custom-fonts捕獲了Text組件的ref Prop，以進行運行時屬性分配。您仍然可以通過以下兩種方式之一訪問Ref：

您可以提供參考：

 const ref = useRef ( ) ;
const { ... fontProps } = useCustomFont ( 'UbuntuBold' , ref ) ;
return (
  < Text
    ref = { ref }
    { ... fontProps }
  />
) ;

或者您可以使用提供的參考：

 const { ref , ... fontProps } = useCustomFont ( 'UbuntuBold' ) ;
return (
  < Text
    ref = { ref }
    { ... fontProps }
  />
) ;

太棒了，那麼其他樣式呢？

也可以這樣做。只需從通話到useCustomFont style道具：

 const { style , ... fontProps } = useCustomFont ( 'UbuntuBold' ) ;
return (
  < TextInput
    style = { [ style , { fontColor : 'blue' } ] }
    { ... fontProps }
  />
) ;

？道具類型

`CustomFontsProvider`

這是一個反應上下文提供商，適用於所有被呼籲ReactNativeCustomFonts.withCustomFont包裹的兒童。管理對兒童的遠程字體的緩存和分配。

道具名稱	數據類型	必需的	預設	描述
`fontFaces`	proptypes.shape（{}）	錯誤的	{}	定義遠程字體的配置。
`fallback`	proptypes.shape（{}）	錯誤的	{顏色：'紅色'，fontuight：'Bold'}	字體下載失敗時使用的樣式。
`onDownloadDidStart`	proptypes.func	錯誤的	（）=> null	何時提供給提供商的回調。
`onDownloadDidEnd`	proptypes.func	錯誤的	（）=> null	何時提供了下載字體的回調。
`onDownloadDidError`	proptypes.func	錯誤的	（）=> null	下載字體時丟棄錯誤時調用。