React Native使用styled-components设置自定义字体时解析声明报错

使用StyleSheet的相同方式可以正常运行

运行环境 #

系统配置： #

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

二进制工具版本： #

• Node：16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node
• Yarn：1.22.11 - ~/.nvm/versions/node/v16.6.0/bin/yarn
• npm：6.14.4 - ~/Projects/design-system/typography/node_modules/.bin/npm
• Watchman：2021.09.13.00 - /usr/local/bin/watchman

npm依赖包： #

• styled-components: 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"

问题原因 #

你使用的styled-components 5.1.0版本存在样式解析bug，对带有空格的fontFamily字符串处理异常，React Native原生StyleSheet没有额外的解析逻辑所以可以正常运行。

解决方案 #

1. 替换字体名称：打开字体册查看该字体的PostScript名称，一般为不带空格的字符串，此处可直接用字体文件名ZapfHumanist601BT-Roman替换原有带空格的字体名即可：

const CustomText = styled.Text(({ theme }) => ({
  fontFamily: 'ZapfHumanist601BT-Roman',
}));

2. 升级依赖版本：将styled-components升级到5.3.11及以上的5.x稳定版本，该版本已修复解析bug，不需要修改现有代码逻辑。
3. 切换样式写法：改用模板字符串写法定义样式，可绕开对象写法的解析逻辑：

const CustomText = styled.Text`
  font-family: Zapf Humanist 601;
`

另外注意你提供的复现代码中CustomText的闭合标签存在语法错误，需要把末尾的<CustomText>改为</CustomText>。

内容的提问来源于stack exchange，提问作者Davi Mattos