Question

我正在使用create-react-native-app。我没有使用＆＃39; android studio或其他任何东西＆＃39;，我也使用崇高的文本编辑器和expo移动应用程序来查看移动设备中的输出。

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

提前感谢，

Answer 1

Expo在他们的文档中很好地涵盖了这一点。当您使用create-react-native-app使用世博会时，请按照他们的文档进行操作。

即使您使用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'),
    });
  }

  // ...
}

这是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 />
    );
  }
}

如何在本机应用程序中使用新字体？

3 个答案: