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

[Magnum]

demo中相关依赖版本如图。

[Magnum]

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

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

Code: Select all

setXY(p)

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

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

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

[Magnum]

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

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

[xuanyi]

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

[Magnum]

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

[Magnum]

刷新下，求大佬指点迷津。多谢！

[xuanyi]

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

[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

[Magnum]

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

[xuanyi]

大佬们，咨询个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'}
    />