Expo React Native自定义按钮文本字体无法生效问题求助

核心问题 #

1. 字体设置位置无效：你把fontFamily写在了TouchableOpacity的样式里，但fontFamily是Text组件专属样式属性，TouchableOpacity不会将该属性传递给子级Text，这个设置完全不起作用。
2. 未接收外部字体参数：使用StartButton时传入了fontFamily="Heavitas"，但组件的props定义里没包含这个参数，导致传入的值根本没被使用。

修改后的组件代码 #

export const StartButton = ({
  style = {},
  textStyle = {},
  size = 125,
  fontFamily = "nevrada", // 新增默认字体，支持外部传入覆盖
  ...props
}) => {
  return (
    <TouchableOpacity
      style={[styles(size).radius, style]}
      onPress={props.onPress}
    >
      {/* 将fontFamily应用到Text组件样式，同时允许textStyle覆盖 */}
      <Text style={[styles(size).text, { fontFamily }, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

const styles = (size) =>
  StyleSheet.create({
    radius: {
      borderRadius: size / 2,
      width: size,
      height: size,
      alignItems: "center",
      justifyContent: "center",
      borderColor: "#FFFFFF",
      borderWidth: 1,
      backgroundColor: "#252250AA",
      // 移除这里无效的fontFamily设置
    },
    text: { color: "#FFFFFF", fontSize: size / 5 },
  });

额外验证点 #

• 确认useFonts.js中定义的字体key（Heavitas、nevrada）和传入组件的名称完全一致，大小写也要匹配。
• 核对字体文件路径，虽然其他组件正常显示，但可以再确认require中的路径是否正确。

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