Page 2 of 3

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

Posted: 2022年 Nov 28日 13:39
by Magnum

demo中相关依赖版本如图。


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

Posted: 2022年 Nov 28日 14:42
by Magnum
xuanyi 2022年 Nov 25日 11:19

react-native-svg 中的组件多数为原生导出的组件, 并不支持 style 中的 transform,并且也并不支持 animated 包装。
建议直接使用 setState 来保存数据。

在如图代码中,涂鸦面板环境中,在手势的onPanResponderMove中设置xy数据后;

Code: Select all

setXY(p)

在onPanResponderRelease中直接打印xy坐标数据

数据未更新,值还是{"x":0,"y":0}。

想知道需要怎么处理才会在onPanResponderMove获取到更新后的xy数据?请大佬指点迷津


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

Posted: 2022年 Nov 28日 17:15
by Magnum

当前遇到的问题:
1.要实现平移滑动功能 OK
2.获取滑动后坐标或更新滑动后数据的points坐标,还没成功。
a.用自己创建RN工程的demo可以实现更新数据points坐标,详见今天问题补充中的demo代码;
b.鉴于上一种情况a不能获取更新数据中points坐标,考虑用onLayout的方法获取当前元素的坐标和宽高数据;涂鸦环境同样无效不能响应获取数据,把onLayout相关代码在自建RN demo工程中,可以获取相关数据。

想问下大佬们有无好的方法解决我的问题?


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

Posted: 2022年 Nov 29日 09:30
by xuanyi

涂鸦系列 App 中 RN版本使用的是 0.51 和 0.59.10 版本。 0.70.x的版本已经迭代了太多。 可以使用0.59.10版本做验证。


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

Posted: 2022年 Nov 29日 10:40
by Magnum

用涂鸦面板环境(RN0.59.10)试了,不好用,所以反馈了以上的问题。


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

Posted: 2022年 Nov 30日 15:03
by Magnum

刷新下,求大佬指点迷津。多谢🙏


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

Posted: 2022年 Dec 1日 11:07
by xuanyi

那建议使用 h5 来实现一个内嵌的页面吧。 数据通过 postmessage 来传递即可


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

Posted: 2022年 Dec 1日 18:59
by Magnum

大佬们,咨询个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,怎么兼容适配安卓手机,使其正常在安卓手机打开加载?

参考链接:https://github.com/reactnativecn/react- ... #onmessage


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

Posted: 2022年 Dec 2日 10:02
by Magnum

大佬们,如果用react-native-webview实现WebView的话,react-native-webview哪个版本适合?我看教程还需要原生端进行配置,请问react-native-webview组件是否可用?


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

Posted: 2022年 Dec 2日 10:35
by xuanyi
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,怎么兼容适配安卓手机,使其正常在安卓手机打开加载?

参考链接:https://github.com/reactnativecn/react- ... #onmessage

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'}
    />