This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).
Expo 符号
一个允许访问原生符号的库。
For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.
重要 此库目前处于 beta 阶段，可能会有破坏性变更。
expo-symbols 提供跨平台访问原生符号库的能力。在 iOS 和 tvOS 上，它使用 SF Symbols。在 Android 和 web 上，它使用 Material Symbols。
安装
- npx expo install expo-symbolsIf you are installing this in an existing React Native app, make sure to install expo in your project.
使用
跨平台符号
传入一个包含各平台符号名称的对象，以在所有平台上渲染符号。可在 Apple SF Symbols 应用 中浏览可用的 iOS 符号，并在 Google Material Symbols 中浏览 Android/web 符号。
import { SymbolView } from 'expo-symbols'; import { StyleSheet, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <SymbolView name={{ ios: 'info.circle', android: 'info', web: 'info' }} tintColor="#007AFF" size={35} /> <SymbolView name={{ ios: 'pencil.tip.crop.circle.badge.plus', android: 'home_and_garden', web: 'home_and_garden', }} style={styles.symbol} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, symbol: { width: 35, height: 35, margin: 5, }, });
如果你只传入一个字符串，它会被视为 SF Symbol 名称，并且只会在 iOS 上渲染。在 Android 和 web 上，除非你提供 fallback，否则不会渲染任何内容：
{ /* 仅限 iOS：直接传入 SF Symbol 名称 */ } <SymbolView name="airpods.chargingcase" style={styles.symbol} type="hierarchical" />; { /* 在未定义该符号的平台上使用 fallback */ } <SymbolView name={{}} fallback={<Text>?</Text>} />;
字重
在 iOS 上，直接传入权重字符串。在 Android 上，从 expo-symbols/androidWeights 导入一个权重对象：
import bold from 'expo-symbols/androidWeights/bold'; <SymbolView name={{ ios: 'star.fill', android: 'star', web: 'star' }} weight={{ ios: 'bold', android: bold }} tintColor="gold" size={35} />;
可用的权重导入：bold、semiBold、medium、regular、light、extraLight、thin。
API
import { SymbolView } from 'expo-symbols';
Component
Type: React.Element<SymbolViewProps>
unionAn array of colors to use when the SymbolType is palette.
Acceptable values are: ColorValue | ColorValue[]
React.ReactNodeFallback to render when a symbol for the given platform is not defined.
unionThe name of the symbol. iOS Symbols can be viewed in the Apple SF Symbols app.
Acceptable values are: SFSymbol | {
android: AndroidSymbol,
ios: SFSymbol,
web: AndroidSymbol
}
ContentMode • Default: 'scaleAspectFit'Determines how the image should be resized to fit its container.
union • Default: 'unspecified'The weight of the symbol to render. On Android and web import from expo-symbols/androidWeights/{weight}.
Acceptable values are: SymbolWeight | {
android: AndroidSymbolWeight,
ios: SymbolWeight
}
Methods
| Parameter | Type |
|---|---|
| symbol | See description for available values. |
| size | number |
| color | string |
Renders a Material Symbol to an image source. Useful for APIs that require an ImageSourcePropType instead of a component, such as tab bar icons.
Promise<ImageSourcePropType | null>Types
| Property | Type | Description |
|---|---|---|
| direction(optional) | 'up' | 'down' | The direction of the animation. |
| type | AnimationType | The type of animation to apply to the symbol. |
| wholeSymbol(optional) | boolean | Whether the entire symbol should animate or just the individual layers. Default: false |
The animation configuration to apply to the symbol.
| Property | Type | Description |
|---|---|---|
| effect(optional) | AnimationEffect | The effect to apply to the symbol. |
| repeatCount(optional) | number | The number of times the animation should repeat. |
| repeating(optional) | boolean | If the animation should repeat. |
| speed(optional) | number | The duration of the animation in seconds. |
| variableAnimationSpec(optional) | VariableAnimationSpec | An object that specifies how the symbol’s layers should animate. |
Literal Type: string
The type of animation to apply to the symbol.
Acceptable values are: 'bounce' | 'pulse' | 'scale'
Literal Type: string
Determines how the image should be resized to fit its container.
Acceptable values are: 'scaleToFill' | 'scaleAspectFit' | 'scaleAspectFill' | 'redraw' | 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
Literal Type: string
The scale of the symbol to render.
Acceptable values are: 'default' | 'unspecified' | 'small' | 'medium' | 'large'
Literal Type: string
Determines the symbol variant to use.
-
'monochrome'- Creates a color configuration that specifies that the symbol image uses its monochrome variant. -
'hierarchical'- Creates a color configuration with a color scheme that originates from one color. -
'palette'- Creates a color configuration with a color scheme from a palette of multiple colors. -
'multicolor'- Creates a color configuration that specifies that the symbol image uses its multicolor variant, if one exists.
Acceptable values are: 'monochrome' | 'hierarchical' | 'palette' | 'multicolor'
Literal Type: string
The weight of the symbol to render.
Acceptable values are: 'unspecified' | 'ultraLight' | 'thin' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'heavy' | 'black'
A variable color animation draws attention to a symbol by changing the opacity of the symbol’s layers.
You can choose to apply the effect to layers either cumulatively or iteratively.
For cumulative animations, each layer’s opacity remains changed until the end of the animation cycle.
For iterative animations, each layer’s opacity changes briefly before returning to its original state.
These effects are compounding, each value set to true will add an additional effect.
| Property | Type | Description |
|---|---|---|
| cumulative(optional) | boolean | This effect enables each successive variable layer, and the layer remains enabled until the end of the animation cycle. This effect cancels the iterative variant. |
| dimInactiveLayers(optional) | boolean | An effect that dims inactive layers of a symbol. This effect draws inactive layers with reduced, but nonzero, opacity. |
| hideInactiveLayers(optional) | boolean | An effect that hides inactive layers of a symbol. This effect hides inactive layers completely, rather than drawing them with reduced, but nonzero, opacity. |
| iterative(optional) | boolean | An effect that momentarily enables each layer of a symbol in sequence. |
| nonReversing(optional) | boolean | An effect that doesn’t reverse each time it repeats. |
| reversing(optional) | boolean | An effect that reverses each time it repeats. |