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	下载字体时丢弃错误时调用。