방법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}/>
import LogoText from '../../assets/tab-icon/logoText.svg';
return(
<View>
<LogoText />
</View>
)
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>
)
npm i react-native-svg
npm i react-native-svg-transformer
cd ios && pod install
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'],
},
};
})();
declare module '*.svg' {
import React from 'react';
import {SvgProps} from 'react-native-svg';
const content: React.FC<SvgProps>;
export default content;
}