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

[xin-425]

[xin-425]

[kingka]

+1

[supervons]

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

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

[xin-425]

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

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

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

[supervons]

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

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

[supervons]

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

[kingka]

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

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

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

[xin-425]

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

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

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

[xin-425]

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

`

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]

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

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

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

[supervons]

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

[kingka]

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

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