Typescript 当UI Kitten希望在本机项目中使用字体时，不会加载字体

我正在使用

React Native

项目的

Typescript

我创建了一个

mapping.json

和一个

react native.config.js

文件，如下所示：

• mapping.json

  ：

  {
     "strict": {
        "text-font-family": "OpenSans-Regular",
  
        "text-heading-1-font-size": 30,
        "text-heading-1-font-weight": "800",
        "text-heading-1-font-family": "OpenSans-Bold",
  
        "text-subtitle-1-font-size": 15,
        "text-subtitle-1-font-weight": "600",
        "text-subtitle-1-font-family": "OpenSans-ExtraBoldItalic",
  
        "text-paragraph-1-font-size": 12,
        "text-paragraph-1-font-weight": "400",
        "text-paragraph-1-font-family": "OpenSans-Light",
  
        "text-caption-1-font-size": 12,
        "text-caption-1-font-weight": "400",
        "text-caption-1-font-family": "OpenSans-Regular",
  
        "text-label-font-size": 12,
        "text-label-font-weight": "800",
        "text-label-font-family": "OpenSans-SemiboldItalic"
     }
  }
  

• react native.config.js:

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

我的自定义字体位于

assets/fonts

文件夹下，我已经执行了

npx react native link

命令

我收到以下错误消息：

如果我单击“关闭”应用程序工作正常，我认为字体不会仅在应用程序启动时加载

我尝试在我的

App.tsx

中加载类似的字体，但没有帮助：

 const App = (): JSX.Element => {
 const [assetsLoaded, setAssetsLoaded] = useState(false);
 useEffect(() => {
   async function importFonts() {
     await Font.loadAsync({
    'openSans-bold': require('../assets/fonts/OpenSans-Bold.ttf'),
    'openSans-bold-italic': require('../assets/fonts/OpenSans-BoldItalic.ttf'),
    'openSans-extra-bold': require('../assets/fonts/OpenSans-ExtraBold.ttf'),
    'openSans-extra-bold-italic': require('../assets/fonts/OpenSans-ExtraBoldItalic.ttf'),
    'openSans-italic': require('../assets/fonts/OpenSans-Italic.ttf'),
    'openSans-light': require('../assets/fonts/OpenSans-Light.ttf'),
    'openSans-light-italic': require('../assets/fonts/OpenSans-LightItalic.ttf'),
    'openSans-regular': require('../assets/fonts/OpenSans-Regular.ttf'),
    'openSans-semi-bold': require('../assets/fonts/OpenSans-Semibold.ttf'),
    'openSans-semi-bold-italic': require('../assets/fonts/OpenSans-SemiboldItalic.ttf'),
  });
}
importFonts().catch((error) => {
  console.error(error);
});
setAssetsLoaded(true);
}, []);
 if (assetsLoaded) {
return (
  <>
    <IconRegistry icons={EvaIconsPack} />
    <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }} customMapping={mapping}>
      <NavigationContainer>
        <TabNavigator />
      </NavigationContainer>
    </ApplicationProvider>
  </>
);
}
  return (
     <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
       <Text>Loading</Text>
     </ApplicationProvider>
  );
};

const-App=（）：JSX.Element=>{
const[assetsLoaded，setAssetsLoaded]=useState（false）；
useffect（（）=>{
异步函数importFonts（）{
等待Font.loadAsync({
“openSans bold”：需要（“../assets/fonts/openSans bold.ttf”），
“openSans bold italic”：需要（“../assets/fonts/openSans bold italic.ttf”），
“openSans extra bold”：需要（“../assets/fonts/openSans ExtraBold.ttf”），
“openSans extra bold italic”：需要（“../assets/fonts/openSans ExtraBoldItalic.ttf”），
“openSans italic”：需要（“../assets/fonts/openSans italic.ttf”），
“openSans light”：需要（“../assets/fonts/openSans light.ttf”），
“openSans light italic”：需要（“../assets/fonts/openSans LightItalic.ttf”），
“openSans常规”：需要（“../assets/font/openSans regular.ttf”），
“openSans Semibold”：需要（“../assets/fonts/openSans Semibold.ttf”），
“openSans SemiboldItalic”：需要（“../assets/fonts/openSans SemiboldItalic.ttf”），
});
}
importFonts（）.catch（（错误）=>{
控制台错误（error）；
});
setAssetsLoaded（真）；
}, []);
如果（已加载资产）{
返回(
);
}
返回(
加载
);
};

我还得到一个

属性“components”在类型中丢失…

on

customMapping={mapping}

我不知道这是否与此问题有关。
我已经回顾了所有与此相关的SO问题和github问题，没有任何帮助。

---

我还运行了expo r-c，删除了节点模块，并再次运行了纱线安装，没有任何帮助，我完全不知所措。

鉴于您的错误，我假设您正在使用expo。 世博会文档中关于加载字体的描述如下：

因为你的字体不会马上准备好，所以通常最好在字体准备好之前不渲染任何东西。 （链接至本部分文档）

在应用程序中使用组件是个好主意。它不应该影响应用程序的视觉效果，因为它在“后台”工作

因此，您的组件可能看起来有点像这样： （很抱歉，它不是用TypeScript编写的，我对TSX没有任何经验）

从“React”导入React；
从“react native”导入{View，Text}；
从“expo”导入{AppLoading，Asset，Font，Icon}；
导出默认类App扩展React.Component{
状态={
isLoadingComplete:false，
};
render（）{
如果（！this.state.isLoadingComplete&！this.props.skipLoadingScreen）{
返回(
);
}否则{
返回(
应用程序已加载，耶！
);
}
}
_loadResourcesAsync=async（）=>{
回报你的承诺([
Asset.loadAsync([
需要（“./assets/images/robot-dev.png”），
需要（“./assets/images/robot-prod.png”），
]),
Font.loadAsync({
“space mono”：require（“./assets/font/SpaceMono Regular.ttf”），
“taviraj”：要求（“./assets/font/taviraj Regular.ttf”），
}),
]);
};
_handleLoadingError=错误=>{
//在这种情况下，您可能希望将错误报告给您的错误
//报告服务，例如哨兵
控制台。警告（错误）；
};
_handleFinishLoading=（）=>{
this.setState（{isLoadingComplete:true}）；
};
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景色：原色，
},
});

import React from 'react';
import { View, Text } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          <Text>The app is loaded, yay!</Text>
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require('./assets/images/robot-dev.png'),
        require('./assets/images/robot-prod.png'),
      ]),
      Font.loadAsync({
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
        'taviraj': require('./assets/fonts/Taviraj-Regular.ttf'),
      }),
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: primaryColor,
  },
});