react-native
이미지

이미지 모듈

react-native 패키지에서 Image 를 가져와야 할 것입니다. 다음과 같이 사용하십시오 :

import { Image } from 'react';

<Image source={{uri: 'https://image-souce.com/awesomeImage'}} />

약간 다른 구문이지만 같은 논리를 가진 로컬 이미지를 사용할 수도 있습니다 :

import { Image } from 'react';

<Image source={require('./img/myCoolImage.png')} />

참고 : - 높이, 너비를 지정해야합니다. 그렇지 않으면 이미지가 표시되지 않습니다.

이미지 예제

class ImageExample extends Component {
  render() {
    return (
      <View>
        <Image style={{width: 30, height: 30}}
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
        />
      </View>
    );
  }
}

조건부 이미지 소스

<Image style={[this.props.imageStyle]}
        source={this.props.imagePath
        ? this.props.imagePath
        : require('../theme/images/resource.png')}
    />

경로가 imagePath 에서 사용 가능한 경우 소스에 할당되고 그렇지 않으면 기본 이미지 경로가 할당됩니다.

이미지 경로에 변수 사용

let imagePath = require("../../assets/list.png");

<Image style={{height: 50, width: 50}} source={imagePath} />

외부 리소스로부터 :

<Image style={{height: 50, width: 50}} source={{uri: userData.image}} />

이미지를 맞추려면

<Image 
    resizeMode="contain" 
    style={{height: 100, width: 100}} 
    source={require('../assets/image.png')} />

커버 , 스트레치 , 반복 및 센터 매개 변수도 사용해보십시오.