javascript - 在 vue-native 中使用 svg 图片

Question

在我的 vue-native 应用程序中，我想显示本地的 SVG 图像。

为此，我尝试了 react-native-svg-uri ( https://github.com/vault-development/react-native-svg-uri )。我使用它的步骤是：-

npm install react-native-svg-uri --save

react-native 链接 react-native-svg

但是，当我尝试使用以下任何一种方法在屏幕上呈现 svg 时，它什么也不显示：-

<svg-uri width="200" height="200" source="{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}"/>

<svg-uri width="200" height="200" :svgXmlData="testSvg"/>

<svg-uri :source="require('../../assets/images/colour.svg')" />

Answer 1

难道你正在使用的是一种反应原生的方式而不是vue native？我相信语法有点不同。但是我确定它应该可以工作，也许您可​​以更改尝试并将 vue 本机语法与此进行比较并弄乱它

Answer 2

Vue Native 具有运行 React Native 插件的功能。

就在脚本标记内的导出默认值之前，需要添加：

import Vue from 'vue-native-core'
import { SvgUri } from 'react-native-svg';

Vue.component('svg-uri', SvgUri)

它可以在模板中使用：

<svg-uri :width="25" :height="25" :uri="image_url"></svg-uri>

---

或者，组件会自动转换为kebab case (hyphen-delimited)：

export default {
  components: { SvgUri }, // now svg-uri can be used
}