React Native中Lora Semibold自定义字体不生效的问题求助

看起来你遇到的问题主要有几个小细节没处理好，我来帮你一步步排查解决：

1. 首先修复Text组件的属性错误 #

你代码里的<Text styles={{...}}>写错了！React Native的Text组件接收的样式属性是单数的style，而不是复数的styles。这个小错误直接导致你写的内联样式完全没被应用，所以文本才会显示默认的黑色小字体。

把这一行改成：

<Text style={{fontFamily:'Lora-SemiBold', fontSize:24, color:'#FFF'}}>Lets get Started</Text>

2. 确认自定义字体的配置是否正确 #

虽然你说字体已经设置好了，但还是要再核对几个关键点：

• 字体文件是否放在正确的目录（比如assets/fonts/），文件名是不是Lora-SemiBold.ttf（注意大小写要一致）
• 如果是React Native 0.60+版本，需要在项目根目录的react-native.config.js里添加字体配置：

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

  然后运行npx react-native link（新版本自动链接，但有时候手动运行一次更稳妥）
• iOS端：检查Info.plist里的UIAppFonts数组，是否包含Lora-SemiBold.ttf
• Android端：确认android/app/src/main/assets/fonts/目录下存在这个字体文件（自动链接会帮你复制过去，也可以手动复制）

3. 验证字体名称是否匹配 #

有时候字体文件的实际名称和文件名不一致，你可以用系统的字体查看工具（比如Mac的字体册、Windows的字体查看器）打开字体文件，查看它的PostScript名称或者全名，确保你在fontFamily里写的名称和这个一致。比如如果字体实际名称是Lora-Semibold（注意小写的b），那就要改成对应的名称。

4. 额外优化：修复navigation的访问问题 #

你的NavigateNextPage函数定义在组件外面，根本访问不到组件的navigation对象，点击按钮会报错。把这个函数移到组件内部，或者把navigation作为参数传入：

const WalkthruBottom1 = ({navigation}) => {
  // 把NavigateNextPage移到组件内部，这样就能访问到navigation
  const NavigateNextPage = () => {
    navigation.navigate('WalkThruPage3');
  };

  // ... 其他代码
};

修改后的完整代码示例 #

import {Image, StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {TouchableOpacity} from 'react-native';

const WalkthruBottom1 = ({navigation}) => {
  const NavigateNextPage = () => {
    navigation.navigate('WalkThruPage3');
  };

  return (
    <View style={styles.container}>
      <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
        {/* 修复了style属性的单复数问题 */}
        <Text style={styles.startText}>Lets get Started</Text>
      </View>
      <TouchableOpacity
        onPress={NavigateNextPage}
        style={{
          position: 'absolute',
          backgroundColor: '#DF2A54',
          borderRadius: 150,
          height: 100,
          width: 100,
          bottom: 50,
          right: 30,
          zIndex: 1,
          justifyContent: 'center',
          alignItems: 'center'
        }}>
        <Image
          source={require('../../assets/images/LoginArrow.png')}
          style={styles.arrowImage}
        />
      </TouchableOpacity>
    </View>
  );
};

export default WalkthruBottom1;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#320F3B',
  },
  startText: {
    fontFamily:"Lora-SemiBold",
    fontSize: 24,
    color: '#FFF'
  },
  arrowImage:{
    height:50,
    width:50
  }
});

按照上面的步骤修改后，你的文本应该就能正确显示Lora Semibold字体、白色和指定大小了。

备注：内容来源于stack exchange，提问作者Gilmeri Golano