Re: 在RN中用svg绘制三角形添加手势无法给予动画转换(Animated transform)
demo中相关依赖版本如图。
demo中相关依赖版本如图。
xuanyi 2022年 Nov 25日 11:19react-native-svg 中的组件多数为原生导出的组件, 并不支持 style 中的 transform,并且也并不支持 animated 包装。
建议直接使用 setState 来保存数据。
在如图代码中,涂鸦面板环境中,在手势的onPanResponderMove中设置xy数据后;
Code: Select all
setXY(p)
在onPanResponderRelease中直接打印xy坐标数据
数据未更新,值还是{"x":0,"y":0}。
想知道需要怎么处理才会在onPanResponderMove获取到更新后的xy数据?请大佬指点迷津
当前遇到的问题:
1.要实现平移滑动功能 OK
2.获取滑动后坐标或更新滑动后数据的points坐标,还没成功。
a.用自己创建RN工程的demo可以实现更新数据points坐标,详见今天问题补充中的demo代码;
b.鉴于上一种情况a不能获取更新数据中points坐标,考虑用onLayout的方法获取当前元素的坐标和宽高数据;涂鸦环境同样无效不能响应获取数据,把onLayout相关代码在自建RN demo工程中,可以获取相关数据。
想问下大佬们有无好的方法解决我的问题?
涂鸦系列 App 中 RN版本使用的是 0.51 和 0.59.10 版本。 0.70.x的版本已经迭代了太多。 可以使用0.59.10版本做验证。
用涂鸦面板环境(RN0.59.10)试了,不好用,所以反馈了以上的问题。
刷新下,求大佬指点迷津。多谢!
那建议使用 h5 来实现一个内嵌的页面吧。 数据通过 postmessage 来传递即可
大佬们,咨询个WebView的使用问题。
1.使用WebView直接加载html代码,是正常显示的。
Code: Select all
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h1>Hello world</h1>' }}
/>
);
}
}
2.使用WebView加载域名链接,iOS正常,安卓会跳转到浏览器上,示例代码如下:
Code: Select all
<WebView
source={{ uri: 'https://baidu.com' }}
style={{ marginTop: 20, }}
scrollEnabled={false}
scalesPageToFit={false}
onLoadEnd={()=>{
}}
onMessage={(data)=>{
console.log("" + JSON.stringify(data))
}}
/>
3.使用WebView加载html文件,iOS显示正常,安卓会显示代码内容,代码如下,安卓效果见附件。
Code: Select all
<WebView
source={require('./svgitem.html')}
style={{ marginTop: 20, }}
scrollEnabled={false}
scalesPageToFit={false}
onLoadEnd={()=>{
}}
onMessage={(data)=>{
}}
/>
想咨询下大佬们,大佬是怎么使用WebView,怎么兼容适配安卓手机,使其正常在安卓手机打开加载?
大佬们,如果用react-native-webview实现WebView的话,react-native-webview哪个版本适合?我看教程还需要原生端进行配置,请问react-native-webview组件是否可用?
Magnum 2022年 Dec 1日 18:59大佬们,咨询个WebView的使用问题。
1.使用WebView直接加载html代码,是正常显示的。Code: Select all
import React, { Component } from 'react'; import { WebView } from 'react-native'; class MyInlineWeb extends Component { render() { return ( <WebView originWhitelist={['*']} source={{ html: '<h1>Hello world</h1>' }} /> ); } }
2.使用WebView加载域名链接,iOS正常,安卓会跳转到浏览器上,示例代码如下:
Code: Select all
<WebView source={{ uri: 'https://baidu.com' }} style={{ marginTop: 20, }} scrollEnabled={false} scalesPageToFit={false} onLoadEnd={()=>{ }} onMessage={(data)=>{ console.log("" + JSON.stringify(data)) }} />
3.使用WebView加载html文件,iOS显示正常,安卓会显示代码内容,代码如下,安卓效果见附件。
Code: Select all
<WebView source={require('./svgitem.html')} style={{ marginTop: 20, }} scrollEnabled={false} scalesPageToFit={false} onLoadEnd={()=>{ }} onMessage={(data)=>{ }} />
想咨询下大佬们,大佬是怎么使用WebView,怎么兼容适配安卓手机,使其正常在安卓手机打开加载?
WebView 直接导入 react-native 下的文件即可。 可参照下代码试下
import { WebView, View } from 'react-native';
_renderChart() {
const { data, renderer } = this.props;
if (typeof renderer !== 'function') {
return;
}
const pixelRatio = PixelRatio.get();
return try {
;
document.body.style.userSelect = 'none';
document.body.style['-webkit-user-select'] = 'none';
var chart = new F2.Chart({
id: 'main',
pixelRatio: ${pixelRatio}
});
${renderer(data)}
window.document.addEventListener('message', function(e) {
var newData = JSON.parse(e.data);
chart.changeData(newData);
});
} catch (error) {
window.postMessage(JSON.stringify({
type: 'error',
error,
message: error.message
}));
}
}
handleMessage = event => {
const { data } = event.nativeEvent;
const parsedData = JSON.parse(data);
if (parsedData.type === 'error') {
console.warn('F2Chart renderer Error: ', parsedData.message, parsedData.error);
this.props.onError && this.props.onError(parsedData.error);
}
this.props.onMessage && this.props.onMessage(parsedData);
};
Code: Select all
<WebView
ref={el => (this.webView = el)}
javaScriptEnabled={true}
javaScriptEnabledAndroid={true}
source={{ html: '<html><body></body></html>' }}
onMessage={this.handleMessage}
onError={console.error.bind(console, 'error')}
injectedJavaScript={this._renderChart()}
scalesPageToFit={Platform.OS !== 'ios'}
/>