@amazon-devices/expo-font提供了一个在运行时加载字体并在React Native组件中使用它们的接口。
安装
-
在
package.json文件中添加JavaScript库依赖项。 -
使用
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库依赖项。
dependencies: {
...
"@amazon-devices/keplerscript-turbomodule-api": "~1.0.0",
"@amazon-devices/expo-asset": "~2.0.1",
"@amazon-devices/expo-constants": "~2.0.1",
"@amazon-devices/expo-font": "~2.0.1",
"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和显示值相匹配的自定义字体。 |
| 程序包版本 | 基于 | @amazon-devices/react-native-kepler版本 |
|---|---|---|
| 2.0.x | 11.8.0 | 2.0.x |
此页面对您有帮助吗?
