Expo 符号

警告 本库当前处于测试版，可能会有重大变动。

expo-symbols 提供跨平台的本地符号库访问。在 iOS 和 tvOS 上，它使用 SF Symbols。在 Android 和网页上，它使用 Material Symbols。

安装

🌐 Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

🌐 Usage

跨平台符号

🌐 Cross-platform symbols

传递一个带有每个平台符号名称的对象，以在所有平台上渲染符号。在 Apple SF Symbols 应用 中浏览可用的 iOS 符号，在 Google Material Symbols 中浏览 Android/网页符号。

🌐 Pass an object with per-platform symbol names to render symbols on all platforms. Browse available iOS symbols in the Apple SF Symbols app and Android/web symbols at Google Material Symbols.

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 符号名称，并且仅在 iOS 上渲染。在 Android 和网页上，除非你提供 fallback，否则不会渲染任何内容：

🌐 If you only pass a string, it is treated as an SF Symbol name and renders only on iOS. On Android and web, nothing will be rendered unless you provide a fallback:

{
  /* iOS-only: pass an SF Symbol name directly */
}
<SymbolView name="airpods.chargingcase" style={styles.symbol} type="hierarchical" />;

{
  /* Use fallback for platforms where the symbol is not defined */
}
<SymbolView name={{}} fallback={<Text>?</Text>} />;

重量

🌐 Weights

在 iOS 上，直接传递一个权重字符串。在 Android 上，从 expo-symbols/androidWeights 导入一个权重对象：

🌐 On iOS, pass a weight string directly. On Android, import a weight object from 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。

🌐 Available weight imports: bold, semiBold, medium, regular, light, extraLight, thin.

应用接口

🌐 API

import { SymbolView } from 'expo-symbols';

Component

Methods

Types