Image_ReactNative

Image

방법1

<Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />

방법2

<Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />

방법3

import Img from '/assets/test.jpg'

<Image source={Img}/>

SVG

import LogoText from '../../assets/tab-icon/logoText.svg';

return(
   <View>
    <LogoText />
  </View>
  )

in map

const [placeList, setPlaceList] = useState([
   {
     img: require('../../assets/image/Rectangle3161.png'),
     placeTitle: '휘닉스파크',
   },
   {
     img: require('../../assets/image/Rectangle3161.png'),
     placeTitle: '1파크',
   },
   {
     img: require('../../assets/image/Rectangle3161.png'),
     placeTitle: '2파크',
   },
 ]);

return(
 {placeList.map(list => (
   <View
       key={list.placeTitle}>
 		<Image source={list.img}
 	</View>
)

SVG 설치

npm i react-native-svg
npm i react-native-svg-transformer
cd ios && pod install

• metro.config.js

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

• type ?? navigators 폴더 안에 파일 생성
  declarations.d.ts

declare module '*.svg' {
  import React from 'react';
  import {SvgProps} from 'react-native-svg';
  const content: React.FC<SvgProps>;
  export default content;
}

참고블로그