प्रतिक्रियाशील मूल - छवियाँ

इस अध्याय में, हम समझेंगे कि कैसे प्रतिक्रियाशील मूल में छवियों के साथ काम करना है।

छवि जोड़ना

एक नया फोल्डर बनाते हैं img के अंदर srcफ़ोल्डर। हम अपनी छवि जोड़ेंगे (myImage.png) इस फ़ोल्डर के अंदर।

हम होम स्क्रीन पर चित्र दिखाएंगे।

App.js

import React from 'react';
import ImagesExample from './ImagesExample.js'

const App = () => {
   return (
      <ImagesExample />
   )
}
export default App

स्थानीय छवि को निम्नलिखित सिंटैक्स का उपयोग करके एक्सेस किया जा सकता है।

image_example.js

import React, { Component } from 'react'
import { Image } from 'react-native'

const ImagesExample = () => (
   <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
)
export default ImagesExample

उत्पादन

स्क्रीन घनत्व

रिएक्ट नेटिव विभिन्न उपकरणों का उपयोग करके छवियों को अनुकूलित करने का एक तरीका प्रदान करता है @2x, @3xप्रत्यय। ऐप केवल विशेष स्क्रीन घनत्व के लिए आवश्यक छवि को लोड करेगा।

निम्नलिखित में छवि के नाम होंगे img फ़ोल्डर।

[email protected]
[email protected]

नेटवर्क छवियाँ

इसके बजाय नेटवर्क छवियों का उपयोग करते समय require, हमें जरूरत है sourceसंपत्ति। यह परिभाषित करने के लिए अनुशंसित हैwidth और यह height नेटवर्क छवियों के लिए।

App.js

import React from 'react';
import ImagesExample from './image_example.js'

const App = () => {
   return (
      <ImagesExample />
   )
}
export default App

image_example.js

import React, { Component } from 'react'
import { View, Image } from 'react-native'

const ImagesExample = () => (
   <Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}
   style = {{ width: 200, height: 200 }}
   />
)
export default ImagesExample

उत्पादन