Top

在RN中用svg绘制三角形添加手势无法给予动画转换(Animated transform)

小程序开发相关产品技术讨论，包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具（IDE）及其他开发技术相关等话题


Post Reply
xuanyi
Posts: 77
Location: 涂鸦玄一

Code: Select all

	source={require('./svgitem.html')}

另外。 官方文档没说可以这么用吧

Tags:
ReactNative
Svg
多边形绘制
手势动画
Magnum
Posts: 20

Re: 在RN中用svg绘制三角形添加手势无法给予动画转换(Animated transform)

xuanyi 2022年 Dec 2日 10:41

Code: Select all

	source={require('./svgitem.html')}

另外。 官方文档没说可以这么用吧

这个参考的博客是https://www.jianshu.com/p/9e6f1569227f

xuanyi
Posts: 77
Location: 涂鸦玄一

Re: 在RN中用svg绘制三角形添加手势无法给予动画转换(Animated transform)

react-native-webview 的示例中是有这种用法， 但这种用法在安卓中本身就存会将 require 进来的文件渲染成纯文本的问题。 因为 require 引入的是一个资源标识符，在一些安卓系统中并不能准确地识别该文件是一个HTML文件。 此处建议将导出的 HTML 文件转成字符串， 再赋值给 source={html: htmlString}

Code: Select all

const html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
    Hello World!    

</body>
</html>
`
export default html

import html from './html.js'

<WebView
	source={{html}}
	...
/>
Magnum
Posts: 20

Re: 在RN中用svg绘制三角形添加手势无法给予动画转换(Animated transform)

xuanyi 2022年 Dec 2日 11:35

react-native-webview 的示例中是有这种用法， 但这种用法在安卓中本身就存会将 require 进来的文件渲染成纯文本的问题。 因为 require 引入的是一个资源标识符，在一些安卓系统中并不能准确地识别该文件是一个HTML文件。 此处建议将导出的 HTML 文件转成字符串， 再赋值给 source={html: htmlString}

Code: Select all

const html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
    Hello World!    

</body>
</html>
`
export default html

import html from './html.js'

<WebView
	source={{html}}
	...
/>

目前是在WebView中直接引用html字符串常量。

导出的 HTML 文件转成字符串。

上面这句话，大佬能否给出具体的实例代码？
另外想咨询下React能否转成html字符串，再给ReactNative使用？或者RN能否直接加载/调用react？

Magnum
Posts: 20

Re: 在RN中用svg绘制三角形添加手势无法给予动画转换(Animated transform)

xuanyi 2022年 Dec 2日 11:35

react-native-webview 的示例中是有这种用法， 但这种用法在安卓中本身就存会将 require 进来的文件渲染成纯文本的问题。 因为 require 引入的是一个资源标识符，在一些安卓系统中并不能准确地识别该文件是一个HTML文件。 此处建议将导出的 HTML 文件转成字符串， 再赋值给 source={html: htmlString}

Code: Select all

const html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
    Hello World!    

</body>
</html>
`
export default html

import html from './html.js'

<WebView
	source={{html}}
	...
/>

React Native 中使用 WebView 加载本地 html

ReactNative WebView加载本地HTML

上面两篇博客说了安卓不能直接加载html文件的原因，因为安卓还要在原生路径上需要进行配置。

暂时没找到导入html文件直接转字符串的方法。

Post Reply