@nativescript-community/ui-svg

为您的 NativeScript 应用添加 SVG 支持。

安装

从您的项目根目录运行以下命令

ns 插件添加 @nativescript-community/ui-svg

NativeScript + Vue

import SVGPlugin from '@nativescript-community/ui-svg/vue';
Vue.use(SVGPlugin);
// or if you want the canvas version
import CanvasSVGPlugin from '@nativescript-community/ui-svg/vue/canvas';
Vue.use(CanvasSVGPlugin);

对于其他版本，您需要直接注册组件

import { SVGView } from '@nativescript-community/ui-svg';
import { CanvasSVG, SVG } from '@nativescript-community/ui-svg/canvas';

它以三种方式工作！

CanvasSVG 扩展 Canvas

<CanvasSVG>
    <CSVG horizontalAlignment="left" src="~/assets/svgs/Ghostscript_Tiger.svg" height="100%" stretch="aspectFit" />
</CanvasSVG>

或 SVGView，这是一个具有自动大小支持的基 svg 视图

<SVGView height="30%" src="~/assets/svgs/Ghostscript_Tiger.svg" stretch="aspectFit" backgroundColor="red" />

或者在一个 Canvas 视图中扩展 CanvasView，如 CanvasLabel

<CanvasLabel>
 <CGroup fontSize="18" verticalAlignment="middle" paddingLeft="20">
        <CSpan text="test" fontWeight="bold" />
        <CSpan text="test2" color="#ccc" fontSize="16" />
    </CGroup>
    <CSVG horizontalAlignment="left" src="~/assets/svgs/Ghostscript_Tiger.svg" height="10" stretch="aspectFit" />
</CanvasSVG>

NativeScript + Svelte

// app/app.ts
import { registerNativeViewElement } from 'svelte-native/dom';
registerNativeViewElement('svgView', () => require('@nativescript-community/ui-svg').SVGView);

<!-- app/components/Foo.svelte -->
<svgView src="~/assets/foo.svg" aspectFit="stretch" />

示例

基本
- 一个基本的 SVG 示例

演示和开发

仓库设置

该仓库使用子模块。如果您没有使用 --recursive 克隆，则需要调用

git submodule update --init

用于安装和链接依赖项的包管理器必须是 pnpm 或 yarn。 npm 无法工作。

为了开发和测试：如果您使用 yarn，则运行 yarn；如果您使用 pnpm，则运行 pnpm i

交互式菜单

要启动交互式菜单，请运行 npm start（或 yarn start 或 pnpm start）。这将列出所有常用脚本。

构建

npm run build.all

警告：似乎 yarn build.all 不会始终正常工作（在 node_modules/.bin 中找不到二进制文件），这就是为什么文档明确使用 npm run

演示

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

贡献

更新仓库

您可以非常容易地更新仓库文件。

首先更新子模块

npm run update

然后提交更改然后更新常用文件

npm run sync

然后您可以运行 yarn|pnpm，如果有任何更改的文件，请提交它们

更新README

npm run readme

更新文档

npm run doc

发布

发布完全由 lerna 处理（您可以使用 -- --bump major 强制主要版本发布）只需运行

npm run publish

修改子模块

该仓库使用 https:// 子模块，这意味着您无法直接推送到子模块。一个简单的解决方案是修改 ~/.gitconfig 并添加

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

问题

如果您有任何问题/问题/评论，请随时创建一个问题或在 NativeScript Community Discord 中开始对话。