0

我在一个项目中使用UI Kitten库。 我创建了一个和一个文件，如下所示：React NativeTypescript
mapping.jsonreact-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>
  );
};

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

4

1 回答 1

1

鉴于您的错误，我假设您正在使用 Expo。世博会文档说这关于加载字体：

由于您的字体不会立即准备好，因此在字体准备好之前不渲染任何内容通常是一个好习惯。（此处链接到文档的这一部分）

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

所以你的组件可能看起来有点像这样：（抱歉它不在 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,
  },
});
于 2020-06-09T08:43:09.503 回答