安卓系统上使用ReactNative（expo）时本地的字体无法正常工作 _编程开发

安卓系统上使用ReactNative（expo）时本地的字体无法正常工作

创始人

2024-11-09 15:31:27

0次

确认本地字体正确安装在文件系统中，并确保字体文件名正确拼写和大小写。
在项目根目录下创建fonts文件夹，并将本地字体文件拷贝到该文件夹中。
在app.json或者配置文件中，将fonts添加到expo下的extra字段中：
```
"expo": {
 "extra": {
   "fonts": [
     {
       "name": "Roboto",
       "asset": "assets/fonts/Roboto-Regular.ttf"
     }
   ]
 }
}
```
其中，name是自定义字体名称，asset是相对于项目根目录的字体文件路径。

在App.js中导入自定义字体并注册：

import * as Font from 'expo-font';
import { Text } from 'react-native';

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

  async componentDidMount() {
    await Font.loadAsync({
      'Roboto': require('./assets/fonts/Roboto-Regular.ttf'),
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    return this.state.fontLoaded ? (
      Hello, world!
    ) : null;
  }
}

可以通过require函数将字体文件引入，然后使用Font.loadAsync方法加载字体，并在state中记录字体是否加载完成。

在需要使用自定义字体的组件中，通过设置style来应用该字体。例如：
```
Hello, world!
```

上一篇：安卓系统上使用html5canvas开发时需要注意哪些问题？

下一篇：安卓系统上最多支持多少个原生平台？

安卓系统上使用ReactNative（expo）时本地的字体无法正常工作

相关内容

热门资讯