React Native 如何从 url 渲染 svg

Question

我正在尝试从 @dicebear/avatars 渲染 svg 文件路径

  let svg = createAvatar(style, {
    seed: 'random',
    // ... and other options
  });

svg 变量有这个值 =

但是当我尝试在 react-native 中渲染时，即使我使用了一个名为 react-native-render-html 的库，也没有显示 我正在尝试使用这样的库进行渲染

<View style={styles.container}>
  <HTML source={{ html: svg }} />

  <StatusBar style="white" />
</View>

当我这样做时，这就是我得到的[

Answer 1

您可以使用react-native-svg 执行此操作。 步骤：

1. 使用npm install react-native-svg 安装库
2. 清除缓存后重建应用程序。
3. 现在像使用 XML 一样

import React from 'react';
import {createAvatar} from '@dicebear/avatars';
import * as style from '@dicebear/avatars-identicon-sprites';
import {SvgCss} from 'react-native-svg';

const xml = createAvatar(style, {
  seed: 'custom-seed',
});

export default function App() {
  return <SvgCss xml={xml} width="100%" height="100%" />;
}