如何在 React Native 应用程序中使用新字体？

Question

我正在使用 create-react-native-app。我没有使用 'android studio or anything'，我还使用 sublime 文本编辑器和 expo 移动应用程序仅在移动设备上查看输出。

我想导入新字体。我不知道流程应该先添加什么。

提前致谢，

Answer 1

Expo 在他们的文档中对此进行了很好的介绍。当您使用 create-react-native-app 时，您正在使用 expo，因此请遵循他们的文档。

即使您使用 react-native init <MyAppName> 创建了您的应用程序，您仍然可以安装他们的 SDK...

npm install --save expo

然后

import { Font } from 'expo';

使用它从资产中加载您的字体

export default class App extends React.Component {
  componentDidMount() {
    Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });
  }

  // ...
}

这就是要点，几乎 copy/paste 来自 Expo Docs

Answer 2

您可以在父组件中加载一次字体，例如 app.js：

import React from 'react';
import { Font } from 'expo';
import Main from './src/components/Main';
import { Text } from 'react-native';


export default class App extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    amount: '',
    isReady: false
  };
  }

  componentDidMount() {
    this._loadFontsAsync();
  }

  _loadFontsAsync = async () => {
    await Font.loadAsync({ FONT_NAME: require('FONT_SOURCE')});
    this.setState({ isReady: true })
  }

  render() {
    if (!this.state.isReady) {
      return <Text>Loading</Text>
    }
    return (
      <Main />
    );
  }
}

Answer 3

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

  async componentDidMount() {
    await Font.loadAsync({
      'helvetica': helveticaFont,
      'roboto-condensed-light': robotoCondensedLight,
      'roboto-condensed-regular': robotoCondensedRegular,
      'roboto-condensed-bold': robotoCondensedBold,
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    return (
      <View >
        {
          this.state.fontLoaded ? (
            <SignIn></SignIn>
          ) : null
        }
      </View>
    );
  }
}

如何在 React Native 应用程序中使用新字体？

How to use new font in react native app?

fonts

custom-font

react-native