使用 react-native-elements 的 Overlay， 将图表全屏横着显示后，datazoom事件失效，手势失效，点击 legend 也失效

[BigFaceMaster]

如题

[zhiqingchen]

需要相关代码示例

[BigFaceMaster]

可复线示例如下：

import React, { useMemo, useState, useEffect, useRef } from 'react';
import { Dimensions } from 'react-native';
import { Overlay } from 'react-native-elements';
import { Card, View } from 'react-native-ui-lib';
import Icon from 'react-native-vector-icons/AntDesign';

import { SvgChart, SVGRenderer } from '@wuba/react-native-echarts';
import {
  BarChart,
  CustomChart,
  GraphChart,
  LineChart,
  LinesChart,
  PieChart,
  RadarChart,
} from 'echarts/charts';
import {
  AriaComponent,
  BrushComponent,
  DatasetComponent,
  DataZoomComponent,
  GraphicComponent,
  GridComponent,
  LegendComponent,
  MarkAreaComponent,
  MarkLineComponent,
  MarkPointComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  TransformComponent,
} from 'echarts/components';
import * as echarts from 'echarts/core';

// Register extensions
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  LegendComponent,
  AriaComponent,
  BrushComponent,
  DataZoomComponent,
  GraphicComponent,
  MarkAreaComponent,
  MarkLineComponent,
  MarkPointComponent,
  TitleComponent,
  ToolboxComponent,
  TransformComponent,
  SVGRenderer,
  BarChart,
  LineChart,
  CustomChart,
  GraphChart,
  LinesChart,
  PieChart,
  RadarChart,
]);

const E_HEIGHT = 250;
const E_WIDTH = 300;

function NeChart({ option, height, width, theme }: any) {
  const chartRef = useRef<any>(null);

  useEffect(() => {
    let chart: any;
    if (chartRef.current) {
      // @ts-ignore
      chart = echarts.init(chartRef.current, theme ?? 'light', {
        renderer: 'svg',
        width: width ?? E_WIDTH,
        height: height ?? E_HEIGHT,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, [option]);

  return <SvgChart ref={chartRef} useRNGH />;
}

const TESTChart: React.FC = () => {
  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;
  const [isFullScreen, setIsFullScreen] = useState(false);

  const getOption = () => {
    return {
      title: {
        text: 'Test Demo',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        show: true,
      },
      dataZoom: [
        {
          // id: 'dataZoomX',
          type: 'slider',
          height: isFullScreen ? 20 : 10,
          moveHandleSize: 5,
          minSpan: 5,
          handleSize: isFullScreen ? 20 : 10,
          handleIcon: isFullScreen
            ? 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z'
            : 'M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z',
          left: isFullScreen ? 60 : 20,
          right: isFullScreen ? 60 : 30,
          top: isFullScreen ? windowWidth - 95 : 140,
          textStyle: {
            fontSize: 10,
          },
          xAxisIndex: [0],
          filterMode: 'weakFilter',
        },
        {
          type: 'inside',
          filterMode: 'weakFilter',
        },
      ],
      grid: {
        top: 30,
        left: 50,
        right: 15,
        bottom: 60,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: 'Line 1',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
          },
          emphasis: {
            focus: 'series',
          },
          data: [140, 232, 101, 264, 90, 340, 250],
        },
        {
          name: 'Line 2',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
          },
          emphasis: {
            focus: 'series',
          },
          data: [120, 282, 111, 234, 220, 340, 310],
        },
      ],
    };
  };

  const options = useMemo(getOption, [isFullScreen]);

  return (
    <View>
      <Card containerStyle={{ padding: 16, paddingBottom: 0 }} height={200}>
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
          }}>
          <Icon
            name="arrowsalt"
            onPress={() => setIsFullScreen(true)}
            size={20}
            color={'rgba(32, 38, 56, 0.45)'}
          />
        </View>
        <NeChart height={170} option={options} />
      </Card>
      {isFullScreen && (
        <Overlay isVisible fullScreen={isFullScreen}>
          <Card
            margin-24
            style={{
              width: windowWidth - 48,
              height: windowHeight - 48,
              flex: 1,
              flexDirection: 'row',
              flexWrap: 'wrap',
            }}
            containerStyle={{
              shadowOpacity: 0,
              elevation: 0,
            }}>
            <View
              style={{
                height: '100%',
                width: windowWidth - 48 - 20,
                display: 'flex',
                justifyContent: 'center',
              }}>
              <View
                style={{
                  transform: [
                    {
                      rotate: '90deg',
                    },
                    {
                      translateX: 0,
                    },
                    {
                      translateY: (windowHeight - windowWidth) / 2,
                    },
                  ],
                  height: windowWidth - 48 - 20,
                  width: windowHeight - 48 - 20,
                }}>
                <NeChart
                  option={options}
                  height={windowWidth - 48 - 20}
                  width={windowHeight - 48 - 20}
                />
              </View>
            </View>
            <Icon
              name="shrink"
              onPress={() => setIsFullScreen(false)}
              size={24}
              color={'rgba(32, 38, 56, 0.45)'}
              style={{
                position: 'absolute',
                bottom: 0,
                right: 0,
              }}
            />
          </Card>
        </Overlay>
      )}
    </View>
  );
};

export default TESTChart;

[zhiqingchen]

useRNGH

尝试关闭 useRNGH

[BigFaceMaster]

Nice!!!!! THX