Question

我有一个带有DrawerOptions的DrawerMenu，它指定了labelStyle，如下所示：

const DrawerStyles = {
    drawerPosition:'right',
    drawerBackgroundColor:'#86959a',
    contentOptions:{
        activeTintColor:'white',
        inactiveTintColor:'white',
        labelStyle:{fontFamily:'Verdana',}
    },
};

但由于某种原因，Verdana字体未显示。我尝试输入Times New Roman，但也没有显示。但如果我输入serif，那就显示了。如何让其他字体文件显示除serif以外的其他字体文件？

-

修改

在IOS中，我的抽屉导航器识别分配给labelStyle:{fontFamily:'some font'}的字体系列。我甚至可以获得自定义的TTF字体。但在android中，它不会渲染。有什么奇怪的，在Android中，我可以为所有组件渲染我的所有字体和自定义字体，除了抽屉导航标签样式字体系列。而在IOS中，我可以获得自定义字体来为iPhone 7模拟器的所有组件提供所有时间。

我的ios和android都是使用相同的本地项目/源代码编译的。

旁注：我确实遇到过在iPhone 8模拟器和iPhone X模拟器中根本不渲染字体的问题。这个问题在这里提出了这个问题：

React-Native custom fonts don't render in iPhone 8 and above?

Answer 1

如果在labelStyle的样式中添加了normalWeight of normal，抽屉项将在Android和iOS中以正确的fontFamily呈现：

labelStyle:{ fontWeight: 'normal' }

Answer 2

并非所有字体都可在移动平台上使用。您必须通过在assets / fonts目录下包含字体ttf文件来链接这些字体。

然后通过在Info.plist（iOS）和package.json文件中引用这些字体文件来链接这些字体文件。

以下是一个示例项目： https://gitlab.com/applification/react-native-custom-fonts

Answer 3

使用此功能：

 labelStyle: {
        fontFamily: 'Verdana',
        fontWeight: '200',
        fontSize: 12,
        // color: 'white',
      },

labelStyle：{fontFamily：'Verdana'}没有显示

3 个答案: