react-native 和 svgcode 示例

问题描述

我已经能够在模拟器中启动 react-nativeAwesomeProject"应用程序(来自教程)，现在我想在 react-native 应用程序中渲染 SVG.

I've been able to launch the react-native "AwesomeProject" app (from the tutorial) in the simulator, and now I'd like to render SVG in a react-native app.

我尝试用包含一个 SVG 椭圆代码片段的 SVG 元素替换 return(...) 语句的内容，然后模拟器屏幕变成红色(可能是因为 Microsoft 使用蓝色:)).

I tried replacing the contents of the return(...) statement with an SVG element that contains one SVG ellipse code snippet and then the simulator screen turned red (probably because Microsoft uses blue:)).

我的猜测是该解决方案涉及react-native中的WebView组件，但是我不清楚如何在该组件中嵌入SVG代码.

My guess is that the solution involves the WebView component in react-native, but it's not clear to me how to embed the SVG code in this component.

顺便说一句，最终我想在 react-native 应用程序中呈现这些图形效果:https://github.com/ocampesato/reactjs-graphics

Btw, eventually I'd like to render these graphics effects in a react-native app:https://github.com/ocampesato/reactjs-graphics

建议和代码示例肯定会受到赞赏:)

Suggestions and code samples would definitely be appreciated:)

推荐答案

几天前我打开了这个 GithubPR 允许您在 WebView 组件中手动设置 HTML.如果您愿意，我看不出有任何理由不能传入 SVG.这可能会给您一个起点.

A couple of days ago I opened this Github PR to allow you to manually set HTML in a WebView component. I don't see any reason you couldn't pass in SVG if you wanted. This might give you a starting point.

然而，HTML 或 SVG 作为字符串传入，这与在 React for web 中使用 HTML 或 SVG 不同.为此，您可能对 this Github issue 感兴趣，该问题建议允许在 React Native 的 WebView 中使用 web-React.

However, the HTML or SVG gets passed in as a string, it's not the same as using HTML or SVG in React for the web. For that, you might be interested in this Github issue which proposes allowing web-React inside React Native's WebView.

这篇关于react-native 和 svgcode 示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！