<Image /> react-native

1. 로컬이미지 연결하기 

<Image source= {require('./path/to/local/image.png') style={styles.image} />

 

2. 원격 URL에서 이미지 연결

<Image source={{ uri: 'https://4ok.kr/remote-image.jpg' }} style={styles.image />

 ( 변수처리 : const imageUri = "https://.....";  하여, {{ uri : imageUri }} 로 처리 )

 

3. Expo Asset 모듈

import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { Asset } from 'expo-asset';

const App = () => {
  const [image, setImage] = React.useState(null);

  React.useEffect(() => {
    const loadImage = async () => {
      const asset = Asset.fromModule(require('./path/to/your/local/image.png'));
      await asset.downloadAsync();
      setImage(asset.uri);
    };

    loadImage();
  }, []);

  return (
    <View style={styles.container}>
      {image && <Image source={{ uri: image }} style={styles.image} />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});

export default App;

Image 컴포넌트의 주요 속성

source 

style

resizeMode : contain, cover, stretch, repeat, center