React Native 如何禁用字体连字（Ligatures）效果？

禁用React Native字体连字的实现方法 #

你可以通过Text组件的样式属性直接关闭Roobert字体的连字效果，具体方案如下：

• 单组件局部禁用（首选方案）
  给Text组件添加fontVariant: ['no-ligatures']配置即可，修改后的代码如下：

<Text
  style={{
    fontFamily: "roobert",
    // 新增以下配置禁用连字
    fontVariant: ['no-ligatures']
  }}
>
  Profile
</Text>

该配置为跨平台通用属性，React Native 0.60及以上版本均支持iOS、Android双端生效，配置后fi字母不会再合并为连字，调整字间距也不会触发该问题。

• 旧版本兼容方案
  如果使用的React Native版本较低，上述配置不生效，可以额外添加fontFeatureSettings属性补充禁用规则：

<Text
  style={{
    fontFamily: "roobert",
    fontVariant: ['no-ligatures'],
    // 兼容旧版本，分别禁用标准连字和上下文连字
    fontFeatureSettings: '"liga" 0, "clig" 0'
  }}
>
  Profile
</Text>

• 全局禁用方案
  如果需要整个应用所有使用Roobert字体的文本都禁用连字，可以在项目入口文件中重写Text组件的默认样式，不需要每个页面单独配置：

// 在App.js/index.js等入口文件中添加以下代码
import { Text } from 'react-native';

const originalRender = Text.render;
Text.render = function render(props, ref) {
  return originalRender.call(this, {
    ...props,
    style: [
      props.style,
      {
        fontVariant: ['no-ligatures'],
        fontFeatureSettings: '"liga" 0, "clig" 0'
      }
    ]
  }, ref);
};

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