React Native - 无法解析样式组件中的声明

Posted 2023-03-15

【中文标题】React Native - 无法解析样式组件中的声明

【英文标题】：React Native - Failed to parse declaration in styled-components

【发布时间】：2021-11-25 19:53:21

【问题描述】：

使用样式表的相同方法正常工作

环境

系统：

操作系统：macOS 11.6 CPU：(12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz 内存：1.03 GB / 16.00 GB 外壳：5.8 - /bin/zsh

二进制文件：

节点：16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node 纱线：1.22.11 - ~/.nvm/versions/node/v16.6.0/bin/yarn npm: 6.14.4 - ~/Projects/design-system/typography/node_modules/.bin/npm 守望者：2021.09.13.00 - /usr/local/bin/watchman

npmPackages：

样式化组件：5.1.0 => 5.1.0

复制

import React from 'react';
import styled from 'styled-components/native';
import  View  from 'react-native';

const CustomText = styled.Text(( theme ) => (
  fontFamily: 'Zapf Humanist 601',
));

export default App = () => (
  <View>
    <CustomText>Your Text<CustomText>
  </View>
);

重现步骤

将 ZapfHumanist601BT-Roman.ttf 复制到您的字体文件夹 (./src/assets/fonts) 中 使用npx react-native link 制作链接字体 在您的文本组件中应用链接字体

预期行为

字体预计应用在样式中

实际行为

Error: Failed to parse declaration "fontFamily: Zapf Humanist 601"

【问题讨论】：

你使用哪个版本的 react-native？

作为一种猜测，尝试将字体的全名放在“fontFamily”中，如下所示： fontFamily: "ZapfHumanist601BT-Roman"

@novonimo。我正在使用 react native 的 0.65.1 版本，我使用全名应用了字体并且它可以工作，但我希望在 Montserrat-Bold、Montserrat-Regular 中出现相同的行为。在我传递没有权重前缀的名称（'Montserrat'）的地方，它可以正常工作。这同样适用于 Web、android、ios。只有在本机反应中我才有这个问题。记住错误发生在样式组件中，样式表可以正常工作。

【参考方案1】：

font-weight 属性在这种情况下无法正常工作。

你可以把你的字体放在src/assets/fonts目录：

src
 |_ assets 
       |_ Montserrat-Bold.ttf
       |_ Montserrat-Regular.ttf
       // and so on for the rest of fonts file

并以这种方式在位于项目根目录的react-native.config.js 文件中定义assets 属性：

module.exports = 
  project: 
    ios: ,
    android: ,
  ,
  assets: ['./src/assets/fonts/'],
;

现在，您可以像这样使用样式中的字体（无需定义 weight 属性）：

title : 
  fontFamily: Montserrat-Regular

【讨论】：

我实际上并没有在样式中设置权重属性，而是通过字体前缀设置权重。但我理解你的想法。示例：我想要一个粗体字体，只需传递 fontFamily: 'Montserrat', fontWeight: 'bold'。无需传递 fontFamily: 'Montserrat-Bold'。我的上下文是一个设计系统，其中字体名称和粗细将来自标记。因此，我们的想法是不要直接在其名称中担心字体的重量。

我举了蒙特塞拉特字体的例子，因为它的工作方式符合我的预期，问题在于这个 Zapf 字体。