집 > 기사 > 웹 프론트엔드 > 반응형 React Native Echarts 구성 요소 소개

반응형 React Native Echarts 구성 요소 소개

不言원래의: 2018-07-14 11:17:562043검색

이 글은 주로 반응형 React Native Echarts 컴포넌트 소개를 소개합니다. 참고할만한 가치가 있어서 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다

최근에는 모바일 단말기에서 데이터 시각화에 대한 요구 사항이 높아졌습니다. 수요가 증가함에 따라 MPAndroidChart와 같은 기존 차트 라이브러리는 더 이상 제품 관리자의 점점 더 비정상적인 요구를 충족할 수 없습니다. 프론트엔드 분야의 데이터 시각화 개발은 상대적으로 활발합니다. WebView를 통해 모바일 단말에서 Echarts와 같은 강력한 프론트엔드 데이터 시각화 라이브러리를 사용하는 것은 문제를 해결하는 좋은 방법입니다.

React Native 개발에서는 동일한 JavaScript 언어를 프론트 엔드로 사용하기 때문에 Echarts 연결 작업이 비교적 원활하지만, 필요한 일부 구성 요소 캡슐화를 통해 여전히 개발 효율성을 크게 향상시킬 수 있습니다.

Echarts는 공식적으로 제3자 패키징 라이브러리인 React-native-echarts를 권장했습니다(참고: 해당 NMP 패키지 이름은 Native-echarts입니다). 현재 400개 이상의 별표와 100개 이상의 주간 다운로드가 있으며 이는 여전히 유효함을 보여줍니다. 의 널리 사용됩니다. 그러나 조사 결과, React-native-echarts에는 다음과 같은 문제가 있음을 발견했습니다.

라이브러리가 반년 넘게 업데이트되지 않았고, Echarts 버전이 3.0에서 멈춰 있으며, 수동으로 추가하는 문제 Android 측 패키징에 대한 자산은 해결되지 않았습니다
라이브러리의 인터페이스 유연성이 낮습니다. 예를 들어 크기는 너비와 높이를 통해서만 설정할 수 있습니다. Echarts 확장 패키지는 이벤트 등록, WebView 통신을 사용할 수 없습니다. 등은 수행할 수 없습니다

WebView를 사용하여 Echarts를 캡슐화하면 로컬 html이 포함되므로 순수 JavaScript가 아닙니다. 언어 수준의 기능이 있고 네이티브 코드가 없으므로 nmp 패키지로 만드는 것은 좋은 선택이 아닙니다. 프로젝트의 내부 구성 요소로 작성하고 직접 구성하는 것이 더 편리하고 유연한 솔루션입니다.

그래서 우리는 타사 Echarts 패키징 라이브러리를 사용하지 않고 범용 구성 요소 WebChart를 직접 작성하기로 결정했습니다. 개발 중 사용을 용이하게 하기 위해 이 구성 요소는 다음과 같은 특징을 가지고 있습니다:

는 응답성에 따라 설계되었습니다. 옵션에서 데이터 소스를 구성하기만 하면 데이터 변경 후 차트가 자동으로 새로 고쳐집니다. React 스타일에 맞춰서.

우리의 솔루션은 구성 요소가 업데이트될 때마다 수신 옵션 매개 변수가 변경되었는지 확인하는 것입니다. 변경된 경우 webView.postMessage를 전달하고 JSON 형식으로 새 옵션을 전달하여 Echarts에 setOption을 다시 알립니다.

Echarts 자체는 옵션을 비교하지만 사전 판단으로 인해 업데이트로 인해 발생하는 WebView와의 빈번한 통신이 줄어들 수 있습니다. WebView 내부의 컨테이너 상위 구성 요소에 비동기 요청이 많을 때 업데이트는 Echarts 자체 setOption을 사용합니다. 전체 WebView를 다시 로드하지 않고도
WebView의 postMessage 및 onMessage 인터페이스를 사용하면 차트와 다른 React Native 구성 요소 간의 이벤트 통신을 구현할 수 있습니다.
구성 요소의 exScript 매개 변수를 통해 모든 스크립트를 WebView에 추가할 수 있습니다.
자체 작성 컴포넌트이기 때문에 echarts 버전, 확장팩, svg/canvas, 데이터 증분 로딩 등을 모두 직접 설정할 수 있습니다

데모 및 사용 방법

사용법과 예는 다음을 참조하세요: React-native-echarts-demo, 직접 사용해야 하는 경우 다음 단계에 따라 이식할 수 있습니다.

루트 디렉터리의 WebChart 구성 요소 폴더를 적절한 위치에 복사합니다.
Copy /android/app/src/main /assets/web 폴더를 프로젝트와 동일한 위치에 복사하세요. 수동으로 생성해야 하는 자산 폴더는 없습니다.

프로젝트에서 WebChart 구성 요소를 사용하려면 위의 두 단계만 필요합니다.

추가 사용자 정의가 필요한 경우 Echarts 코드는 위 두 폴더의 index.html에 있습니다. 현재 확장 팩이 없는 4.0 정식 버전에서 필요한 코드를 다운로드할 수 있습니다. 공식 웹사이트 버전 및 확장 패키지 교체, svg/canvas, 증분 데이터 로딩 등은 WebChart/index.js에서 직접 수정할 수 있습니다. 모바일 측면에서는 성능상의 이유로 일반적으로 svg 렌더링 모드를 사용합니다.

WebChart의 구체적인 사용법은 App.js를 참고하세요. 스타일 설정은 일반 React Native 컴포넌트와 동일합니다. flex를 사용하거나 고정값으로 설정할 수 있습니다. 세 가지 추가 매개변수:

option(object): setOption에 할당된 매개변수 개체입니다. 변경 후 WebChart는 자동으로 내부적으로 setOption을 호출하여 반응형 새로 고침을 수행합니다. JSON 구문 분석 중에는 함수가 처리되지 않는다는 점에 특히 주의하세요. 따라서 함수 포맷터와 클래스 기반 LinearGradient를 사용하지 마세요. 데모
exScript(string): 원하는 대로 템플릿과 일반 객체를 사용하세요. WebView가 로드될 때 실행되는 코드는 일반적으로 이벤트 등록입니다. 템플릿 리터럴을 사용하는 것이 좋습니다.
onMessage(함수): WebView는 내부적으로 postMessage 이후에 콜백을 트리거합니다. 다른 React Native 구성요소와 함께

물론 이는 비즈니스 요구에 따라 설계된 매개변수이며 완전히 자유롭게 재설정할 수 있습니다.

Echarts와 React Native 구성 요소 간의 통신

React Native의 WebView 구성 요소에서는 html과 구성 요소 간의 양방향 통신을 위해 onMessage 및 postMessage가 제공됩니다. 구체적인 사용법은 설명서를 참조하세요.

webView.postMessage를 사용하면 WebChart는 exScript에서 setOption을 실행하도록 Echart에 알립니다. window.postMessage를 사용하면 Echarts 이벤트를 React Native 구성 요소에 전달할 수 있습니다.

일반적으로 우리는 통신 데이터가 다음 형식의 객체라는 데 동의합니다:

{
  type: 'someType',
  payload: {
      value: 111,
  },
}

onMessage와 postMessage는 문자열만 전송할 수 있으므로 다음과 유사하게 exScript에서 JSON 직렬화가 필요합니다.

exScript={`
  chart.on('click', (params) => {
    if(params.componentType === 'series') {
      window.postMessage(JSON.stringify({
        type: 'select',
        payload: {
            index: params.dataIndex,
        },
      }));
    }
  });
`}

위는 캡슐화된 응답 WebChart입니다. 구성 요소 및 사용법에 대한 전체 코드는 React-native-echarts-demo를 참조하세요.

사용 중에는 아직 우회할 수 없는 몇 가지 함정이 있습니다. 이를 알고 있는 학생은 수정해 주시기 바랍니다.

IOS에서는 Echarts가 투명 효과를 렌더링할 수 없는 것 같습니다. rgba로 설정할 수 없습니다. 일반적으로
React Native의 WebView에 잘못된 style.height 속성이 있는 것 같아서 외부에 View를 설정해야 합니다
현재 리소스 로딩 방식에 따르면 인덱스 복사본이 2개가 됩니다. 안드로이드에서는 html. 플랫폼은 런타임에 판단하기 때문에 index.anroid.js와 index.ios.js를 별도로 설정하더라도 패키징되기 때문에 안드로이드에서는 에셋을 수동으로 추가해야 합니다
index.html에 인라인 처리해야 합니다. Echarts의 코드, 별도의 js 파일에 대한 외부 참조가 잘못된 것 같습니다

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

반응형 React Native Echarts 구성 요소 소개

데모 및 사용 방법

Echarts와 React Native 구성 요소 간의 통신

관련 기사