블로그 이름을 입력해주세요

React-native Skia 본문

React-Native

React-native Skia

Dev_jihoon8730 2024. 3. 1. 12:58

 

리액트 네이티브 Skia에 대해서 스터디할 필요가 생겼다

내가 그리고 싶은 2d 애니메이션을 직접 그리고 수정할 수 있다

 

Install(인스톨)

https://shopify.github.io/react-native-skia/docs/getting-started/installation

 

Installation | React Native Skia

React Native Skia brings the Skia Graphics Library to React Native.

shopify.github.io

 

Canvers

import React from 'react';
import { StyleSheet } from 'react-native';
import { Canvas } from '@shopify/react-native-skia';

export default function SkiaStudy() {
  return <Canvas style={styles.container}>
      
  </Canvas>;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
});

 

 

Circle

import React from 'react';
import { StyleSheet } from 'react-native';
import { Canvas, Circle } from '@shopify/react-native-skia';

export default function SkiaStudy() {
  return (
    <Canvas style={styles.container}>
      <Circle cx={250} cy={300} r={100} color="blue" />
      <Circle cx={150} cy={300} r={100} color="yellow" />
    </Canvas>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
});

Line

import React from 'react';
import { StyleSheet } from 'react-native';
import { Canvas, Line, vec } from '@shopify/react-native-skia';

export default function SkiaStudy() {
  return (
    <Canvas style={styles.container}>
      <Line
        p1={vec(0, 0)}
        p2={vec(256, 256)}
        color="blue"
        style="stroke"
        strokeWidth={6}
      />
    </Canvas>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
});

 

 

Oval

import React from 'react';
import { StyleSheet } from 'react-native';
import { Canvas, Oval } from '@shopify/react-native-skia';

export default function SkiaStudy() {
  return (
    <Canvas style={styles.container}>
      <Oval x={64} y={50} width={128} height={256} color="lightblue" />
    </Canvas>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
});

 

Line Array and LinearGradient

import React from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { Canvas, Line, vec, LinearGradient } from '@shopify/react-native-skia';

export default function SkiaStudy() {

  const data = [
    {
      key: 0,
    },
    {
      key: 1,
    },
    {
      key: 2,
    },
    {
      key: 3,
    },
    {
      key: 4,
    },
  ];

  return (
      <Canvas style={styles.container}>
        {data.map((item, index) => {
          const cy = (index + 1) * 20;
          return (
            <Line
              p1={vec(0, cy)}
              p2={vec(256, cy)}
              color="lightblue"
              style="stroke"
              strokeWidth={4}
            >
              <LinearGradient
                start={vec(0, 0)}
                end={vec(2 * 80, 2 * 50)}
                colors={['#00ff87', '#60efff']}
              />
            </Line>
          );
        })}
      </Canvas>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
});

Group multiply

import React from 'react';
import { StyleSheet } from 'react-native';
import { Canvas, Circle, Group } from '@shopify/react-native-skia';

export default function SkiaStudy() {
  return (
    <Canvas style={styles.container}>
      <Group blendMode={'multiply'}>
        <Circle cx={250} cy={300} r={100} color="blue" />
        <Circle cx={150} cy={300} r={100} color="yellow" />
      </Group>
    </Canvas>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
});

 

 

잠깐 본 문서로는 심플한거 같으면서도 이걸 활용하는건 많은 스터디가 필요할듯