@amazon-devices/expo-font提供了一个在运行时加载字体并在React Native组件中使用它们的接口。
安装
-
在
package.json文件中添加JavaScript库依赖项。选择适用于您的React Native版本的选项卡。 -
使用
npm install命令重新安装依赖项。
示例
下面的示例演示了如何使用useFonts挂钩加载字体。您需要下载.otf文件并替换useFonts调用中的内容。
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
expo-font 开放Beta测试文档 作为预发布开放Beta测试的一项内容,亚马逊提供了此技术文档。随着亚马逊…
@amazon-devices/expo-font提供了一个在运行时加载字体并在React Native组件中使用它们的接口。
package.json文件中添加JavaScript库依赖项。选择适用于您的React Native版本的选项卡。
dependencies: {
...
"@amazon-devices/keplerscript-turbomodule-api": "~1.0.0",
"@amazon-devices/expo-asset": "~2.0.0",
"@amazon-devices/expo-constants": "~2.0.0",
"@amazon-devices/expo-font": "~2.0.0",
"expo": "~50.0.0",
...
}
npm install命令重新安装依赖项。
useFonts挂钩加载字体。您需要下载.otf文件并替换useFonts调用中的内容。
import {useFonts} from '@amazon-devices/expo-font';
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
export const App = () => {
const [fontsLoaded] = useFonts({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
if (!fontsLoaded) {
return null;
}
return (
<View style={styles.container}>
<Text style={[styles.text, {fontFamily: 'Inter-Black'}]}>
Inter Black
</Text>
<Text style={styles.text}>Platform Default</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: 'white',
},
text: {
fontSize: 30,
color: 'black',
},
});
| 挂钩 | 描述 |
|---|---|
useFonts | 使用loadAsync加载字体映射。如果字体已加载并且可以使用,则返回boolean。 |
| 方法 | 描述 |
|---|---|
isLoaded | 同步检测fontFamily的字体是否已完成加载。 |
isLoading | 同步检测fontFamily的字体是否仍在加载中。 |
loadAsync | 从静态或远程资源加载字体的高效方法,可以将其结合平台的原生文本元素一起使用。 |
processFontFamily | 用于将字体系列名称转换为作用域内名称。此项不需要在独立应用或裸应用中调用,但如果在这些上下文中调用,它将返回非作用域内的字体系列名称。 |
unloadAllAsync | 卸载所有自定义字体。此项用于测试。 |
unloadAsync | 卸载与所提供的fontFamilys和显示值相匹配的自定义字体。 |
| NPM程序包版本 | Vega SDK版本 | Vega OS版本 | React Native版本 |
|---|---|---|---|
| 2.0.1758683737 | 0.23及更早版本 | OS 1.1 (1401010009820)及更早版本 | 0.72 |
此页面对您有帮助吗?
