反应原生矢量图标

此软件包允许您以同样的方式使用 Brightlayer UI 补充图标 反应-内生-活性-角 用于材料图标.

RN CLI 安装

要安装来自国家防范机制的 Blightlayer UI 本地矢量图标作为您的项目的依赖, 您可以在您的工程根中运行以下命令之一 :

npm install --save @brightlayer-ui/react-native-vector-icons
or
yarn add @brightlayer-ui/react-native-vector-icons

此软件包依赖 反应-内生-活性-角 作为同伴依赖:

npm install --save react-native-vector-icons
or
yarn add react-native-vector-icons

此套件中的被剪切的 SVG 助手也需要 react-native-svg数字 :

npm install --save react-native-svg
or
yarn add react-native-svg

注意跟随 整合指示 在文档中提供您工程中的图标.

iOS系统

要在 iOS 工程中使用此软件包, 请编辑您的 Info.plist

• 在"UIAppFonts"键下,为BrightlayerUIIcons.ttf添加一个条目.

<key>UIAppFonts</key>
<array>
  <string>BrightlayerUIIcons.ttf</string>
</array>

在更新这些文件后, 您需要安装 Pods 并重新编译您的应用程序 :

cd ios
pod install

机器人

要在 Android 工程中使用此软件包, 如果您之前提供了字体路径 。 格莱尔在建设。 Gradle 你现在需要删除这条路径 :

编辑 android/app/build.gradle (没有) android/build.gradle )并删除以下内容:

- apply from: "../../node_modules/@brightlayer-ui/react-native-vector-icons/fonts.gradle"

为博览会安装

要在您的博览会项目中安装 Blightlayer UI React 本地矢量图标, 请在您的项目根中运行以下命令 :

yarn add @brightlayer-ui/react-native-vector-icons

Expo Apps 设置指南

react-native-vector-icons 支持"博览会",而本地平台不需要再进一步的步骤,但您可以选择遵循以下步骤来设置字体配置插件.

设置字体配置插件

这是可选但推荐的,因为通过配置插件,自构建时间起图标字体将在应用程序中可用,而不是在运行时被加载 - 看见更多。 。 。 .

需要用吗 prebuild,可以使用配置插件.

1. 在您的 app.config.json / js 中,添加以下内容:

module.exports = {
    expo: {
        plugins: [
            [
                'expo-font',
                {
                    fonts: ['./node_modules/@brightlayer-ui/react-native-vector-icons/Fonts/BrightlayerUIIcons.ttf'],
                },
            ],
        ],
    },
};

2. 运行 npx expo prebuild。 。 。 .
3. 重建应用程序 : npx expo run:ios 或者说 npx expo run:android。 。 。 .

如何解决iOS问题

如果您遇到iOS构建的问题,请遵循这些步骤来清理您的环境并解决共同的问题:

清洁衍生数据和 iOS 构建艺术

从您的工程根中运行 :

rm -rf ios/build
rm -rf ios/Pods
rm -rf ios/Podfile.lock
cd ios
pod install
cd ..

清洁 Xcode 衍生数据 :

rm -rf ~/Library/Developer/Xcode/DerivedData

重新生成 Codegen 文件( Expo 管理的工作流程)

如果您使用 Expo 预建( 管理的工作流程) , 请运行 :

npx expo prebuild --clean

从 iOS 中删除字体

如果您需要从您的 iOS 项目中删除图标字体 :

1. 在 Xcode 中打开工作空间 .
2. 在项目导航器中,找到 fonts 文件夹在 Resources。 。 。 .
3. 删除提及 BrightlayerUIIcons.ttf。 。 。 .

移徙指南

遵循这个移民指南 了解更多 移徙

使用量

在您的应用程序中使用这些图标与使用反应-内存-vector-icons完全相同(我们使用他们的库来构建我们的,所以API是相同的).

import BLUIIcon from '@brightlayer-ui/react-native-vector-icons';
...
<BLUIIcon name={'broccoli'} color={'green'} size={24}/>

SVG 剪贴板斜线图标

如果需要真正的剪接道斜拉片治疗(剪接后切出虹口内容),请使用 SlashedBLUISvgMaskIcon 导出为 react-native-svg 路径.

import { SlashedBLUISvgMaskIcon } from '@brightlayer-ui/react-native-vector-icons';
import { Path } from 'react-native-svg';

<SlashedBLUISvgMaskIcon slashColor={'#777'} slashLength={1.1} size={24}>
    <Path d="M3 3 H21 V21 H3 Z" fill="currentColor" />
</SlashedBLUISvgMaskIcon>;

如果您想要直接通过 BLUI 图标名称( 不创建) Path 儿童),使用 SlashedBLUIIcon数字 :

import { SlashedBLUIIcon } from '@brightlayer-ui/react-native-vector-icons';

<SlashedBLUIIcon name={'device'} color={'currentColor'} slashColor={'#777'} slashLength={0.9} size={24} />;