supervons / react-native-echarts-pro

A React-Native charts based on Apache ECharts, support various charts and map.
https://supervons.github.io/react-native-echarts-pro-docs/
MIT License
216 stars 33 forks source link

使用react-native-view-shot 无法截取到图表,echarts = 1.9.1 #128

Closed xin-425 closed 2 months ago

xin-425 commented 2 months ago

20240807122919

xin-425 commented 2 months ago

3021723005122_ pic 3011723005121_ pic

kingka commented 2 months ago

+1

supervons commented 2 months ago

似乎是 react-native-view-shot 仓库问题,在文档中有提到,可以试下给组件父类添加这个:

<View collapsable={false}>
  ...
</View>
xin-425 commented 2 months ago

似乎是 react-native-view-shot 仓库问题,在文档中有提到,可以试下给组件父类添加这个:

<View collapsable={false}>
  ...
</View>

谢谢回复 已经尝试过了 没有解决问题。 目前是安卓端无法截取 IOS 都正常,安卓端android:hardwareAccelerated 设置为 false 后整个图表都不显示了没,是什么原因呢

supervons commented 2 months ago

组件已添加androidHardwareAccelerationDisabled={true}属性,无需再次添加。

开启硬件加速某些情况下会崩溃,参考react-native-webview#1838

supervons commented 2 months ago

另外,无法截图的相关代码能否贴一下,后续有时间我复现下,看看能不能找到方案截图。

kingka commented 2 months ago

组件已添加androidHardwareAccelerationDisabled={true}属性,无需再次添加。

开启硬件加速某些情况下会崩溃,参考react-native-webview#1838

我现在也是遇到了这个情况,结合react-native-view-shot 与react-native-echarts-pro 的时候,如果只是渲染一个webview ,webview的内容是能被截取的,但是只要绘制图表,截取出来就是空白的,太奇怪了

xin-425 commented 2 months ago

组件已添加androidHardwareAccelerationDisabled={true}属性,无需再次添加。

开启硬件加速某些情况下会崩溃,参考react-native-webview#1838

是的设置 false 后 无法正常渲染,截取又是正常的

xin-425 commented 2 months ago

另外,无法截图的相关代码能否贴一下,后续有时间我复现下,看看能不能找到方案截图。

`

import React, { useRef, useState } from 'react';
import { View, Button, Image, StyleSheet } from 'react-native';
import ViewShot from 'react-native-view-shot';

const App = () => {
  const viewShotRef = useRef(null);
  const [imageUri, setImageUri] = useState(null);

  const captureView = () => {
    viewShotRef.current.capture().then(uri => {
      setImageUri(uri);
      console.log('Captured image URI: ', uri);
    }).catch(error => {
      console.error('Failed to capture view:', error);
    });
  };

  return (
    <View style={styles.container}>
      <ViewShot ref={viewShotRef} style={styles.content}>
        <View style={styles.innerContent}>
          {chartsView()}
        </View>
      </ViewShot>
      <Button title="Capture View" onPress={captureView} />
      {imageUri && (
        <Image
          source={{ uri: imageUri }}
          style={styles.capturedImage}
        />
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    width: 300,
    height: 300,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  innerContent: {

  },
  capturedImage: {
    width: 300,
    height: 300,
    marginTop: 20,
  },
});

export default App;

`

`

const chartsView = () => {
    let D = JSON.parse(gearRecordsJson);
    const xLength = X.length;
let option = {
  animation: false,
  grid: {
    height: 165,
    left: "8%",
    right: "8%",
  },
  tooltip: {
    renderMode: "richText",
    formatter:
      "(params)=> { 'show source';const date = params[0].name;const showValue = params[0].value;const tipHtml = `${date} ${showValue} ${'Level'}`;return tipHtml;}",
    confine: true,
    trigger: "axis",
    // position: function (point, params, dom, rect, size) {
    //   // 固定在顶部
    //   return [point[0], "10%"];
    // },
    position:
      "(point, params, dom, rect, size) =>{ return [point[0], '10%']  }",
  },
  xAxis: {
    type: "category",
    // type: 'value',
    // alignTicks: true,
    data: X,
    // data: D.time,
    show: true,
    axisLabel: { showMaxLabel: true },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    name: defaultI18N.formatValue("duration"),
    nameLocation: "end",
    nameTextStyle: {
      padding: [24, 60, 0, 0],
      align: "center",
      verticalAlign: "top",
    },
  },
  yAxis: {
    type: "value",
    alignTicks: true,
    min: 0,
    max: 5,
    show: true,
    // data: [0, 1, 2, 3, 4, 5, 6],
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#C1C1C1"],
        type: [2, 4],
        dashOffset: 1,
      },
    },
    name: defaultI18N.formatValue("level"),
    nameLocation: "end",
    nameTextStyle: {
      padding: [0, 0, 0, 20],
    },
  },
  series: [
    {
      data: D.level,
      type: "line",
      lineStyle: {
        color: "#0A79C3",
      },
      itemStyle: {
        color: "#0A79C3",
      },

      symbolSize: 8,
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(10, 121, 195, 0.2500)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(10, 194, 175, 0)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      // symbol: 'none',
    },
  ],
};

return <Chart options={option} />;

};`

<RNEChartsPro webViewSettings={{ bounces: false }} enableParseStringFunction={true} option={props.options} />

kingka commented 2 months ago

似乎是 react-native-view-shot 仓库问题,在文档中有提到,可以试下给组件父类添加这个:

<View collapsable={false}>
  ...
</View>

https://shopify.github.io/react-native-skia/docs/snapshotviews 用其他截图的库,也是空白的,大大有空的话帮忙看下,都是在Android端出现异常,出现问题的RN版本是0.73,0.64的版本还是可以的

supervons commented 2 months ago

@kingka @xin-425 问题已解决,似乎是由于截图工具不支持 webviewcanvas 画图,更新至 1.9.3 版本,添加属性 renderMode={"svg"} 即可。 可参考Demo:https://github.com/supervons/ExploreRN/commit/0f66103a69655bd949d126601ca3131d0199671d

kingka commented 2 months ago

@kingka @xin-425 问题已解决,似乎是由于截图工具不支持 webviewcanvas 画图,更新至 1.9.3 版本,添加属性 renderMode={"svg"} 即可。 可参考Demo:supervons/ExploreRN@0f66103

感谢大大的及时更新!!666