[React Native] 이미지 삽입

리액트 네이티브에서 Image 태그를 사용하고, 스타일을 다음과 같이 적용합니다.

import { TextInput ,Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
return(

	<View>
      <View>
        <Image source={require('../../assets/1-circle-fill.png')} 
            style={{width : 16, 
                    height : 16, 
                    marginRight : 8}}
        />
         <Image source={require('../../assets/2-circle.png')} 
               style={{width : 16,
                       height : 16, 
                       marginRight : 4}}          
          />
          <Image source={require('../../assets/3-circle.png')} style={{width : 16, height : 16}}/>
        </View>
      </View>

  )

그런데 Image의 source와 style속성 적용부분이 지저분해서 컴포넌트화 시키고자 했습니다.

그래서 ImageComponent를 구성해 보았습니다.

Image 태그의 source = require(src) 속성은 다른 컴포넌트에서 경로(src)를 가져올 경우 제대로 표시가 되지 않습니다. 따라서 사용할 컴포넌트에서 <Image>을 사용해야 한다고 합니다.

아래와 같이 사용시 정상적으로 이미지 표시되지 않음

<ImageComponent src = {'../../assets/1-circle-fill.png'} width={16} height={16}/>

  
//ImageComponent.tsx  

import { Image, ImageStyle, StyleProp, ViewStyle } from 'react-native';

type ImageComponentProps = {
  style: StyleProp<ImageStyle>; // Use ImageStyle instead of ViewStyle
  src: string;
};

export default function ImageComponent({ src, style }: ImageComponentProps) {
  return <Image source={require(src)} style={style} />;
}

결론

따라서 다음과 같이 적용하였습니다. 이미지 url 주소가 지저분하여 변수로 import를 한 후에
source 속성에 적용하였습니다.

스타일 속성도 시트에 적용하였습니다.

컴포넌트화 시키지 못해서 조금 아쉽지만, 이전보다 가독성은 좋아졌습니다.

import { TextInput ,Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'

import CircleFillStep1 from '../../assets/1-circle-fill.png'
import CircleStep2 from '../../assets/2-circle.png'
import CircleStep3 from '../../assets/3-circle.png'


```tsx
    return
    (
         <View>
            <View>
              <Image source={CircleFillStep1} style={CircleFillStep1Style}/>
              <Image source={CircleStep2} style={CircleStep2Style}/>
              <Image source={CircleStep3} style={CircleStep3Style}/>
            </View>
          </View>
    )


	const styles = StyleSheet.create({
	 	  CircleFillStep1Style: {width : 16, height : 16, marginRight : 8},
	      CircleStep2Style : {width : 16, height : 16, marginRight : 8}
	      CircleStep3Style : {width : 16, height : 16, marginRight : 8}
    })

만일 아래와 같이 오류가 발생한다면,

Cannot find module '../../assets/btn_header_close.png' or its corresponding type declarations.ts(2307)

루트 경로에 types 폴더를 만들고, 폴더 안에 images.d.ts파일을 생성 후 아래와 같이 입력합니다.

//types/images.d.ts
declare module '*.png' {
    const value: any;
    export = value;
}