UI Kitten 想在 React Native 项目中使用字体时未加载字体

Question

我在 React Native 项目中使用 UI Kitten 库 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 命令。

我收到以下错误消息：

如果我点击 Dismiss 应用程序运行正常，我认为只有在应用程序启动时才不会加载字体。

我试过在 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>
  );
};

我也在 customMapping={mapping} 上收到 Property 'components' is missing in type ... 我不知道这是否与此问题有关。
我已经查看了所有 SO 问题和 github 与此相关的问题，没有任何帮助。
我也运行 expo r -c，又删除了node_modules和运行 yarn install，没有任何帮助，我很迷茫。

Answer 1

鉴于您的错误，我假设您正在使用 Expo。 Expo 文档说了关于加载字体的内容：

Since your fonts won't be ready right away, it is generally a good practice to not render anything until the font is ready. (link to this part of the docs here)

最好在您的应用中使用 AppLoading 组件。它不应影响应用的视觉效果，因为它适用于 "backstage".

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

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,
  },
});

UI Kitten 想在 React Native 项目中使用字体时未加载字体

Fonts are not loaded when UI Kitten wants to use them in React Native project

typescript

react-native

react-native-ui-kitten