【问题标题】:The font is not a system font该字体不是系统字体
【发布时间】:2021-05-14 22:31:34
【问题描述】:

我的应用程序已经发布了第一个版本。我正在努力解决一些问题。通过在我的手机上重新启动应用程序来修改它,它给了我以下错误:

fontFamily "FunctionLH" 不是系统字体,尚未加载 通过 Font.loadAsync。

但是,我以前从未遇到过这个问题,字体正确加载没有问题......而且我使用 Font.loadAsync 很好。我完全不明白这种担忧...... 你能帮帮我吗?

这是我加载字体的 app.js 的代码。

export default class App extends React.Component {
  constructor(props) {
    super(props);
    Text.defaultProps = Text.defaultProps || {};
    Text.defaultProps.allowFontScaling = false; 
    this.state = {
      isFirstConnection: true,
      status: 0,
      fontLoaded: false
    };
  }

  async UNSAFE_componentWillMount() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
      i18n.changeLanguage(lang);
    }

    if (isConnected === true && this.props && this.props.navigation) {
      this.props.navigation.navigate("TabBar");
    }
  }

  performTimeConsumingTask = async () => {
    return new Promise((resolve) =>
      setTimeout(() => {
        resolve("result");
      }, 750)
    );
  };

  async componentDidMount() {
    await Font.loadAsync({
      FunctionLH: require("./assets/fonts/FunctionLH-Light.ttf")
    });

    const data = await this.performTimeConsumingTask();
    if (data !== null) {
      this.setState({
        isFirstConnection: false,
        status: 1,
        fontLoaded: true,
      });
    }
  }
  
  render() {
    if (this.state.status == 1) {
      if (this.state.isFirstConnection && this.state.fontLoaded) {
        return <SplashScreen />;
      } else {
        return <Navigation screenProps={'Authentication'} />;
      }
    }

    return (
      <ImageBackground
        source={require("./assets/images/background.jpg")}
        style={{ flex: 1 }}
      >
        <View style={[styles2.container, styles2.containerCentered]}>
          <StatusBar hidden={true} />
          <View style={styles2.subContainer}>
            <Image
              style={styles2.logo}
              source={require("./assets/images/logo.png")}
            />
            <ActivityIndicator size="large" color="#43300E" />
            <Text>{i18n.t("app.loading") + "..."}</Text>
          </View>
        </View>
      </ImageBackground>
    );
  }
}

【问题讨论】:

    标签: javascript react-native fonts


    【解决方案1】:

    您应该尝试运行 react-native link 将您的自定义文件链接到 iOS 和 android 的资源(res>字体)

    【讨论】:

    • 您好,感谢您的回答。我只是这样运行命令?我要试试
    • 试试看.. 你会看到类似: info Linking assets to ios project info Linking assets to android project success 资产已成功链接到你的项目(节点:10544)警告:访问非循环依赖中模块导出的现有属性“padLevels”(使用node --trace-warnings ... 显示警告的创建位置)
    • 它给出:'成功资产已成功链接到您的项目'但再次运行应用程序,我仍然有问题
    • 这是您需要做的。 (1) 在你的根 react-native 项目中创建一个文件,将其命名为 react-native.config.js 并添加以下代码 module.exports = { project: { ios: {}, android: {}, // 分组到"project" }, assets: ["./assets/fonts/"], // 保持不变 }; .... 打开您的 package.json 文件并将其添加到列表中:“rnpm”:{“assets”:[“./assets/fonts/”]}
    • 然后试试 react-native 链接
    猜你喜欢
    • 1970-01-01
    • 2011-04-19
    • 1970-01-01
    • 1970-01-01
    • 2020-11-01
    • 2020-01-06
    • 1970-01-01
    • 1970-01-01
    • 2016-04-20
    相关资源
    最近更新 更多