fontFamily "$text-font-family" 不是系统字体，还没有通过 Font.loadAsync 加载

Question

这是react expo项目，使用react-native-form-validation进行验证时出现错误。

<?php
 $spawncmd = <<<'EOF'
set --
n=0
while [ $n -lt $execargc ] ; do
    eval "set -- \"\$@\" \"\$execarg$n\""
    unset -v execarg$n
    n=$((n+1))
done
unset -v execargc
exec "$@"
EOF;

 // Invokes external program and return its output.
 function spawn($args)
 {
   global $spawncmd;
   
   putenv("execargc=".count($args));
   for($i=0; $i<count($args); $i++)
     putenv("execarg$i=".$args[$i]);

   $ret = shell_exec($spawncmd);
   
   putenv("execargc=");
   for($i=0; $i<count($args); $i++)
     putenv("execarg$i=");

   return $ret;
 }

 // Invokes external program and return its exit status.
 function catspawn($args)
 {
   global $spawncmd;
   
   putenv("execargc=".count($args));
   for($i=0; $i<count($args); $i++)
     putenv("execarg$i=".$args[$i]);

   $ret = null;
   passthru($spawncmd, $ret);
   
   putenv("execargc=");
   for($i=0; $i<count($args); $i++)
     putenv("execarg$i=");

   return $ret;
 }

 // Argument vector version of popen.
 function pspawn($args, $mode)
 {
   global $spawncmd;
   
   putenv("execargc=".count($args));
   for($i=0; $i<count($args); $i++)
     putenv("execarg$i=".$args[$i]);

   $ret = popen($spawncmd, $mode);
   
   putenv("execargc=");
   for($i=0; $i<count($args); $i++)
     putenv("execarg$i=");

   return $ret;
 }

这是使用 react-native-ui-kitten 验证输入的一部分。

错误运行是因为输入中的所有文本都像标签和输入文本。

我没有找到发生此错误的原因。

Answer 1

我遇到了同样的错误。原因是 ui-kitten 库使用“OpenSans-Regular”。 见：ui-kitten-documentation

您可以将 OpenSans-Regular 字体的 .ttf 添加到资产文件夹中。

然后通过 expo-font 将字体加载到系统中。 见：Expo documentation

Answer 2

首先，运行 npm i expo-font

然后，运行 npm i @expo-google-fonts/open-sans

然后，运行 npm i expo-app-loading

然后在您的项目文件夹中创建一个名为 hooks 的文件，您的 App.js 所在的位置。

在 hooks 文件夹中创建一个名为 useFonts.js 的文件，并在其中粘贴此代码

import * as Font from 'expo-font';
import {
  OpenSans_300Light,
  OpenSans_300Light_Italic,
  OpenSans_400Regular,
  OpenSans_400Regular_Italic,
  OpenSans_600SemiBold,
  OpenSans_600SemiBold_Italic,
  OpenSans_700Bold,
  OpenSans_700Bold_Italic,
  OpenSans_800ExtraBold,
  OpenSans_800ExtraBold_Italic,
} from '@expo-google-fonts/open-sans';

const useFonts = async () => {
  await Font.loadAsync({
    OpenSans_300Light,
    OpenSans_300Light_Italic,
    OpenSans_400Regular,
    OpenSans_400Regular_Italic,
    OpenSans_600SemiBold,
    OpenSans_600SemiBold_Italic,
    OpenSans_700Bold,
    OpenSans_700Bold_Italic,
    OpenSans_800ExtraBold,
    OpenSans_800ExtraBold_Italic,
  });
};

export default useFonts;

并在您的 App.js 中这样写

import React, { Component, useState } from 'react';
import AppLoading from 'expo-app-loading';

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

import useFonts from './hooks/useFonts';

export default function RegisterScreen(props) {
  const [IsReady, SetIsReady] = useState(false);

  const LoadFontsAndRestoreToken = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFontsAndRestoreToken}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return (
    <View>
      <Text style={{ fontFamily: 'OpenSans_400Regular' }}>Text Example</Text>
      <Text>Normal Text</Text>
    </View>
  );
}