[RN] transform 사용하는 방법

 

❎ 문제 :

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

const YourComponent = () => {
  return (
    <View style={styles.transformedView}>
      {/* 내용 */}
    </View>
  );
};


const styles = StyleSheet.create({
  transformedView: {
    width: 100,
    transform: 'rotate(135deg)',
  },
})

 

transform을 위와 같이 작성했을 시, 화면에 적용은 되었지만 코드 메서제에서 다름과 같은 에러가 계속 표시 되었다.

 

 

Type 'string' is not assignable to type '(PerpectiveTransform | RotateTransform | RotateXTransform | RotateYTransform | RotateZTransform | ... 7 more ... | MatrixTransform)[]'.

 

'string' 유형은 []'배열'에 할당될 수 없다고한다.

 

 

✅ 해결

1. StyleSheet명세 확인

 

리엑트 네이티브의 transform 속성들을 명확히 정의한 TransformsStyle 인터페이스를 살펴본다.
이 변환들은 배열 형태로 지정되어 있음을 알 수 있다.

export interface TransformsStyle {
    transform?: //transform: 다양한 변환 객체들의 배열
        | Array<| PerpectiveTransform
            | RotateTransform
            | RotateXTransform
            | RotateYTransform
            | RotateZTransform
            | ScaleTransform
            | ScaleXTransform
            | ScaleYTransform
            | TranslateXTransform
            | TranslateYTransform
            | SkewXTransform
            | SkewYTransform
            | MatrixTransform>
        | undefined;
    .......
}

 

 

 

2. 다음과 같이 transform을 배열 속에 작성한다.

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

const YourComponent = () => {
  return (
    <View style={styles.transformedView}>
      {/* 내용 */}
    </View>
  );
};


const styles = StyleSheet.create({
  transformedView: {
    width: 100,
    transform: [
      { rotate: '135deg' }, // 135도 회전
    ],
  },
});

export default YourComponent;

 

 

transform을 여러 개 작성하고 싶을 땐 요소를 추가해준다.

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

const YourComponent = () => {
  return (
    <View style={styles.transformedView}>
      {/* 내용 */}
    </View>
  );
};


const styles = StyleSheet.create({
  transformedView: {
    width: 100,
    transform: [
      { rotate: '135deg' }, // 135도 회전
      { scale: 1.5 }, // 1.5배 확대
    ],
  },
});

export default YourComponent;