react-native
इमेजिस

छवि मॉड्यूल

आप Image को react-native पैकेज से आयात करने जा रहे हैं, तो इसका उपयोग करें:

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')} />

कवर , खिंचाव , दोहराना और केंद्र पैरामीटर भी आज़माएं।