React Native Expo中修改输入框用户输入内容字体的问题

针对你遇到的输入框用户输入内容字体无法设置为Montserrat_700Bold的问题，可按以下步骤排查和修复：

1. 确认自定义字体已正确导入项目 #

React Native中使用自定义字体需要先完成配置和链接：

• 在项目根目录创建react-native.config.js，配置字体路径（根据你实际存放字体的路径修改）：

module.exports = {
  assets: ['./assets/fonts/'],
};

• 执行npx react-native-asset完成字体链接（旧版本RN可执行npx react-native link）。
• 重启RN开发服务器，确保字体已加载。

2. 修复props覆盖问题 #

你当前代码中{...props}在自定义fontFamily设置之后，若父组件传递了fontFamily或相关样式，会覆盖你当前的设置。调整props顺序，将自定义配置放在{...props}之后：

<TextField
  {...props}
  {...formikProps}
  fontFamily={"Montserrat_700Bold"}
  fontSize={sizes.subtitle}
  labelFontSize={10}
  activeLineWidth={0}
  tintColor={colors.black}
  textColor={colors.text_secondary}
  baseColor={colors.text_primary}
  titleTextStyle={{}}
  labelTextStyle={{ fontFamily: "Montserrat_700Bold" }}
  inputContainerStyle={[{
    backgroundColor: isFocused ? colors.light : colors.grey,
    borderRadius: 3, borderWidth: 0.5,paddingLeft:5, paddingTop:6, height: 56, width:WIDTH -50,  marginVertical:10,
    alignSelf:"center",
  }, style]}
  secureTextEntry={password && !showPass}
/>

3. 尝试使用inputStyle单独设置输入文本样式 #

部分Material TextField组件会提供inputStyle属性专门控制输入框内文本的样式，若上述方法无效，可尝试：

<TextField
  {...props}
  {...formikProps}
  inputStyle={{ fontFamily: "Montserrat_700Bold", fontSize: sizes.subtitle }}
  labelFontSize={10}
  activeLineWidth={0}
  tintColor={colors.black}
  textColor={colors.text_secondary}
  baseColor={colors.text_primary}
  titleTextStyle={{}}
  labelTextStyle={{ fontFamily: "Montserrat_700Bold" }}
  inputContainerStyle={[{
    backgroundColor: isFocused ? colors.light : colors.grey,
    borderRadius: 3, borderWidth: 0.5,paddingLeft:5, paddingTop:6, height: 56, width:WIDTH -50,  marginVertical:10,
    alignSelf:"center",
  }, style]}
  secureTextEntry={password && !showPass}
/>

额外排查点 #

• 确认字体名称是否正确：有些字体文件的实际注册名称可能和文件名不同，可通过打印已加载字体列表确认（比如使用Font.loadAsync加载后打印返回结果）。

内容的提问来源于stack exchange，提问作者Alfonso.b