React Native의 ART를 사용하여 도형 그리기를 시도

React Native에는 Docs에는 없는 ART라는 SVG 같은 형태로 도형 그릴 수 있는 라이브러리가 있습니다.
새롭게 라이브러리 추가하지 않고 사용할 수 있고, 일단 공식이므로 안심감도 있습니다.
그런 ART를 조금 만져 보았으므로, 도입 순서와 사용법을 남겨 둡니다.

도입 절차

우선은 평소의 초기 순서로 iOS로 기동까지 합니다.

react-native init ARTSample
cd ARTSample
react-native run-ios

Android는 그대로 OK이므로 iOS 만 Xcode에서 다음 설정이 필요합니다.
자동 링크의 방법이 있을지도 모릅니다만, 우선 수동 링크합니다.

ARTSample/ios/ARTSample.xcodeproj를 엽니 다

Libraries를 마우스 오른쪽 버튼으로 클릭하고 Add File to ${PROJECT_NAME}를 클릭합니다

ARTSample/node_module/react-native/Libraries/ART/ART.xcodeproj 선택

Xcode에서 ARTSample/ios/ARTSample.xcodeproj를 선택하여 Build Phases를 엽니 다.

Link Binary with Libraries의 + 버튼을 누릅니다

libART.a 추가

이것으로 준비 완료입니다.

샘플 코드

우선 확실히 움직이고 싶으므로, index.ios.js 를 편집해, 도형 묘화 해 봅니다.
덧붙여 라이브러리 추가를 하고 있으므로, react-native run-ios 인가, Xcode상에서 재실행을 실시해 주세요.

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  StyleSheet,
  ART,
} from 'react-native';

const {
  Surface,
  Shape,
  Path,
} = ART;

export default class ARTSample extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Surface width={100} height={100}>
          <Shape
            d={'M50 0 L 0 100 L 100 100 Z'}
            fill={'red'}
            strokeWidth={1}
          />
        </Surface>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

AppRegistry.registerComponent('ARTSample', () => ARTSample);

이런 식으로 표시됩니다.



Shape 컴포넌트의 d 프로퍼티에는 SVG의 패스 데이터 캐릭터 라인을 넣는다고 하고, SVG의 패스 데이터 캐릭터 라인을 해설한 이 페이지가 참고가 되었습니다.
상당한 표현력이 있을 것 같습니다.
htp : // fg 1977. HTML. x 두건. jp / ch / svg 또는 / svg도 _03. htm

요약

React Native의 ART는 도형 묘화를 크로스 플랫폼으로 간편하게 실시할 수 있으므로,
데이터에 맞추어 색을 바꿀 필요가 맞거나 등, 화상에서는 대응할 수 없는 경우 등 조금 도형 묘화하고 싶을 때에 편리합니다.
Docs에 없는 것이 조금 불안합니다만, Deprecated가 되는 경우도 뭔가의 공지가 있을 것으로 기대…

각 구성 요소의 세부 사항은 GitHub에서 확인하는 것이 좋을 것이라고 생각합니다.
htps : // 기주 b. 코 m / 후세 보오 k / 레아 ct-nachi ゔ / t ree / ma s r / pe b rarie s / A RT

참고

h tp // //b로 w에에후 d. 코 m / b ぉ g / 갓찐 ㅔ ㅔ ゔ ご /

도입 순서 포함 참고로 했습니다

React 아이콘은 샘플로 제공되며 복잡한 모양을 만드는 데 도움이됩니다