[React Native] react-native-svg 사용법 (점과 점 사이를 선으로 긋는...

https://github.com/react-native-community/react-native-svg

오늘 사용할 라이브러리!

- 내가 원하는 것: 화면 내에서 원하는 점과 점 사이를 선으로 긋고 싶다.

import React, {useEffect, useState, useRef} from 'react'; import {Svg, Line} from 'react-native-svg'; const AnimatedSvg = Animated.createAnimatedComponent(Svg); const AnimatedLine = Animated.createAnimatedComponent(Line); export default () => { const initWidth = useRef(new Animated.Value(0)).current; const initHeight = useRef(new Animated.Value(0)).current; let animateWidth = initWidth.interpolate({ inputRange: [0, 100], outputRange: ['0', '100'], }); let animateHeight = initHeight.interpolate({ inputRange: [0, 100], outputRange: ['0', '100'], }); useEffect(() => { Animated.timing( // Animate over time initWidth, { toValue: 100, duration: 500, useNativeDriver: true, }, ).start(); Animated.timing( // Animate over time initHeight, { toValue: 100, duration: 500, useNativeDriver: true, }, ).start(); }, []); return ( ) }

- 결과물

- 이번에는 원하는 점과 점 사이를 그어보자

- 그러려면 내가 원하는 위치의 xy 포지션을 알아야겠지!

[출처]

https://stackoverflow.com/questions/53550173/how-do-i-draw-a-line-between-2-points-in-react-native

https://github.com/react-native-community/react-native-svg/issues/803

https://stackoverflow.com/questions/30096038/react-native-getting-the-position-of-an-element

이런 곳도 있네

https://github.com/kdeloach/react-lineto

from http://coding-dahee.tistory.com/151 by ccl(A) rewrite - 2020-03-23 06:20:13