নেটিভ প্রতিক্রিয়া - গতিশীল নাম ব্যবহার করে চিত্রের প্রয়োজনীয় মডিউল

Question 1

আমি বর্তমানে প্রতিক্রিয়া নেটিভ ব্যবহার করে একটি পরীক্ষা অ্যাপ তৈরি করছি। ইমেজ মডিউল, এখন পর্যন্ত ঠিকঠাক কাজ করেছে।

উদাহরণস্বরূপ, যদি আমার নামযুক্ত কোনও চিত্র থাকে avatarতবে নীচের কোড স্নিপেটটি ভাল কাজ করে।

<Image source={require('image!avatar')} />

তবে আমি যদি এটি একটি গতিশীল স্ট্রিংয়ে পরিবর্তন করি তবে আমি পাই

<Image source={require('image!' + 'avatar')} />

আমি ত্রুটি পেয়েছি:

অজানা মডিউল "চিত্র! অবতার" প্রয়োজন। আপনি যদি নিশ্চিত হন যে মডিউলটি রয়েছে, প্যাকেজারটি পুনরায় চালু করার চেষ্টা করুন।

স্পষ্টতই এটি একটি স্বতন্ত্র উদাহরণ, তবে গতিশীল চিত্রের নামগুলি গুরুত্বপূর্ণ। নেটিভ প্রতিক্রিয়া গতিশীল চিত্রের নাম সমর্থন করে না?

গতিশীল চিত্রের নাম সহ দেশীয় ত্রুটি প্রতিক্রিয়া জানায়

Question 2

এটি " স্ট্যাটিক রিসোর্স " বিভাগের অধীনে ডকুমেন্টেশনে আচ্ছাদিত রয়েছে :

বান্ডলে কোনও চিত্র উল্লেখ করার একমাত্র অনুমোদিত উপায় হ'ল উত্সটিতে আক্ষরিক প্রয়োজন ('চিত্রের নাম-এর-সম্পদ') লিখুন।

// GOOD
<Image source={require('image!my-icon')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

তবে আপনাকে আপনার চিত্রগুলি এক্সকোডে আপনার অ্যাপ্লিকেশনটিতে একটি এক্সক্যাসেটের বান্ডেলে যুক্ত করার কথাও মনে রাখতে হবে, যদিও আপনার মন্তব্য থেকে মনে হয় আপনি ইতিমধ্যে এটি করেছেন।

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app- using-images-xcassets

Question 3

এটি আমার পক্ষে কাজ করেছে:

আমি একটি কাস্টম ইমেজ উপাদান তৈরি করেছি যা চিত্রটি ওয়েব থেকে এসেছে বা কোনও স্থানীয় ফোল্ডার থেকে পাস হচ্ছে কিনা তা যাচাই করতে বুলিয়ান গ্রহণ করে।

// In index.ios.js after importing the component
<CustomImage fromWeb={false} imageName={require('./images/logo.png')}/>

// In CustomImage.js which is my image component
<Image style={styles.image} source={this.props.imageName} />

আপনি যদি কোডটি দেখতে পান তবে এর মধ্যে একটি ব্যবহার করার পরিবর্তে:

// NOTE: Neither of these will work
source={require('../images/'+imageName)} 
var imageName = require('../images/'+imageName)

আমি কেবল require('./images/logo.png')প্রপোজ হিসাবে পুরো পাঠাচ্ছি । এটি কাজ করে!

Question 4

আপনি যদি ইমেজগুলি (ইউআরএল) জানেন তবে অনুমোদন করুন:

এই সমস্যার মধ্য দিয়ে আমি যেভাবে আমার পথ হ্যাক করেছি:

আমি একটি অবজেক্টের সাথে একটি ফাইল তৈরি করেছি যা চিত্র এবং চিত্রটির নাম সংরক্ষণ করে:

const images = {
  dog: {
    imgName: 'Dog', 
    uri: require('path/to/local/image')
  },
  cat: {
    imgName: 'Cat on a Boat', 
    uri: require('path/to/local/image')
  }
}

export { images };

তারপরে আমি বস্তুটি এমন উপাদানটিতে আমদানি করেছিলাম যেখানে আমি এটি ব্যবহার করতে চাই এবং কেবল আমার শর্তসাপেক্ষে রেন্ডারিংটি করুন:

import { images } from 'relative/path';

if (cond === 'cat') {
  let imgSource = images.cat.uri;
}

<Image source={imgSource} />

আমি জানি এটি সবচেয়ে কার্যকর উপায় নয় তবে এটি অবশ্যই একটি কর্মচঞ্চল।

আশা করি এটা সাহায্য করবে!

Question 5

যদি আপনি উদাহরণস্বরূপ আপনার চিত্রগুলির JSON অ্যারের মাধ্যমে লুপিং করে একটি তালিকা তৈরির উপায় অনুসন্ধান করেন তবে এটি আপনার পক্ষে কাজ করবে।

একটি ফাইল তৈরি করুন (আমাদের JSON ডাটাবেস ধরে রাখতে) উদাহরণস্বরূপ প্রোফাইল DB.js:

const Profiles=[
	  {
	  "id" : "1",
	  "name" : "Peter Parker",
	  "src" : require('../images/user1.png'),
	  "age":"70",
	},
	{
	"id" : "2",
	"name" : "Barack Obama",
	"src" : require('../images/user2.png'),
	"age":"19",
	},
	{
	"id" : "3",
	"name" : "Hilary Clinton",
	"src" : require('../images/user3.png'),
	"age":"50",
	}
]
export default Profiles;

স্নিপেট প্রসারিত করুন

তারপরে ফ্ল্যাটলিস্ট ব্যবহার করে তালিকার মাধ্যমে আমাদের উপাদানগুলিতে ডেটা আমদানি করুন এবং লুপ করুন:

import Profiles from './ProfilesDB.js';

<FlatList
  data={Profiles}
  keyExtractor={(item, index) => item.id}
  renderItem={({item}) => (
    <View>
      <Image source={item.src} />
      <Text>{item.name}</Text>
    </View>
  )}
/>

স্নিপেট প্রসারিত করুন

শুভকামনা!

Question 6

যেমন নেটিভ ডকুমেন্টেশন প্রতিক্রিয়া জানায় , আপনার বান্ডিলটি সংকলনের আগে আপনার সমস্ত চিত্রের উত্স লোড করা দরকার

সুতরাং গতিশীল চিত্রগুলি ব্যবহার করার জন্য অন্য কোনও উপায়ে এটি স্যুইচ স্টেটমেন্ট ব্যবহার করছে। ধরা যাক আপনি ভিন্ন চরিত্রের জন্য একটি আলাদা অবতার প্রদর্শন করতে চান, আপনি এরকম কিছু করতে পারেন:

class App extends Component {
  state = { avatar: "" }

  get avatarImage() {
    switch (this.state.avatar) {
      case "spiderman":
        return require('./spiderman.png');
      case "batman":
        return require('./batman.png');
      case "hulk":
        return require('./hulk.png');
      default:
        return require('./no-image.png');
    }
  }

  render() {
    return <Image source={this.avatarImage} />
  }
}

নাস্তাটি দেখুন: https://snack.expo.io/@abranhe/dynamic-images

এছাড়াও, মনে রাখবেন আপনার চিত্রটি যদি অনলাইনে থাকে তবে আপনার কোনও সমস্যা না থাকলে আপনি এটি করতে পারেন:

let superhero = "spiderman";

<Image source={{ uri: `https://some-website.online/${superhero}.png` }} />

Question 7

প্রথমে প্রয়োজনীয় চিত্র সহ একটি ফাইল তৈরি করুন - প্রতিক্রিয়া নেটিভ চিত্রগুলি এইভাবে লোড করা আবশ্যক।

সম্পদ / সূচক.জেএস

export const friendsandfoe = require('./friends-and-foe.png'); 
export const lifeanddeath = require('./life-and-death.png'); 
export const homeandgarden = require('./home-and-garden.png');

এখন আপনার সমস্ত সম্পদ আমদানি করুন

App.js

import * as All  from '../../assets';

আপনি এখন আপনার চিত্রটি একটি বিভক্ত মান হিসাবে ব্যবহার করতে পারেন যেখানে ইমেজভ্যালু (ব্যাকএন্ড থেকে আগত) নামের স্থানীয় ফাইলের সমান যেমন: 'হোম্যান্ডগার্ডেন':

<Image style={styles.image} source={All[`${imageValue}`]}></Image>

Question 8

এখানে গুরুত্বপূর্ণ অংশ: আমরা প্রয়োজনের মতো চিত্রের নামটি সমাহার করতে পারি না [প্রয়োজনীয় ('আইটেম' + বৈকল্পিক + '] পিএনজি')]

পদক্ষেপ 1: আমরা নীচের চিত্রের বৈশিষ্ট্য সংগ্রহ করে একটি ইমেজ ক্লেকশন.জেএস ফাইল তৈরি করি

ImageCollection.js
================================
export default images={
    "1": require("./item1.png"),
    "2": require("./item2.png"),
    "3": require("./item3.png"),
    "4": require("./item4.png"),
    "5": require("./item5.png")
}

পদক্ষেপ 2: আপনার অ্যাপ্লিকেশনে চিত্র আমদানি করুন এবং প্রয়োজনীয় হিসাবে চালিত করুন ulate

class ListRepoApp extends Component {

    renderItem = ({item }) => (
        <View style={styles.item}>
            <Text>Item number :{item}</Text>
            <Image source={Images[item]}/>
        </View>
    );

    render () {
        const data = ["1","2","3","4","5"]
        return (
            <FlatList data={data} renderItem={this.renderItem}/>
        )
    }
}

export default ListRepoApp;

আপনি যদি বিশদ ব্যাখ্যা চান তবে নীচের লিঙ্কটি অনুসরণ করতে পারেন https://www.thelearninguy.com/react-native-require-image-using-dynamic-names দেখুন

সৌজন্য: https://www.thelearninguy.com

Question 9

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

class Images extends Component {
  constructor(props) {
    super(props);
    this.state = {
           images: {
                './assets/RetailerLogo/1.jpg': require('../../../assets/RetailerLogo/1.jpg'),
                './assets/RetailerLogo/2.jpg': require('../../../assets/RetailerLogo/2.jpg'),
                './assets/RetailerLogo/3.jpg': require('../../../assets/RetailerLogo/3.jpg')
            }
    }
  }

  render() {
    const {  images } = this.state 
    return (
      <View>
        <Image
                            resizeMode="contain"
                            source={ images['assets/RetailerLogo/1.jpg'] }
                            style={styles.itemImg}
                        />
     </View>
  )}
}

Question 10

তুমি ব্যবহার করতে পার

<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />

চিত্র প্রদর্শন করতে।

থেকে:

https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

Question 11

গতিশীল চিত্র প্রয়োজন ব্যবহার করে

this.state={
       //defualt image
       newimage: require('../../../src/assets/group/kids_room3.png'),
       randomImages=[
         {
            image:require('../../../src/assets/group/kids_room1.png')
          },
         {
            image:require('../../../src/assets/group/kids_room2.png')
          }
        ,
         {
            image:require('../../../src/assets/group/kids_room3.png')
          }
        
        
        ]

}

যখন বোতামটি টিপুন- (আমি ছবিটি এলোমেলো নম্বর পছন্দ করি তবে 0-2)

let setImage=>(){
//set new dynamic image 
this.setState({newimage:this.state.randomImages[Math.floor(Math.random() * 3)];
})
}

দর্শন

<Image
        style={{  width: 30, height: 30 ,zIndex: 500 }}
        
        source={this.state.newimage}
      />

Question 12

আমি জানি এটি পুরানো তবে আমি সমাধানটি সন্ধান করার সাথে সাথে এই প্রশ্নটি এখানে পেয়ে যাচ্ছি। দস্তাবেজগুলি একটি ইউরির জন্য অনুমতি দেয়: 'নেটওয়ার্ক চিত্র'

https://facebook.github.io/react-native/docs/images#network- চিত্র

আমার জন্য আমি ইমেজগুলি এটির সাথে গতিময়ভাবে কাজ করছি

<Image source={{uri: image}} />

Question 13

 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput> 

<Image
            source={this.props.imgUri}
            style={{
              height: 30,
              width: 30,
              resizeMode: 'contain',
            }}
          />

আমার ক্ষেত্রে আমি অনেক চেষ্টা করেছি কিন্তু শেষ পর্যন্ত এটি স্টাইলড ইনপুট উপাদানটির নাম চিত্রটি স্টাইলড ইনপুটটির মধ্যে কাজ করে যদি আপনি এখনও বুঝতে না পারেন তবে আমাকে জানান

Question 14

আমার মতো কোনও কার্যকারিতা রয়েছে এমন কোনও অ্যাপ্লিকেশন যদি আপনার কাছে থাকে তবে বলুন। যেখানে আপনার অ্যাপ্লিকেশনটি বেশিরভাগই অফলাইন এবং আপনি একের পর এক চিত্রগুলি রেন্ডার করতে চান। তারপরে নীচে সেই পদ্ধতির নীচে দেওয়া হয়েছে যা আমার জন্য প্রতিক্রিয়া নেটিভ সংস্করণ 0.60 এ কাজ করেছে।

প্রথমে রিসোর্স / ইমেজ নামে একটি ফোল্ডার তৈরি করুন এবং আপনার সমস্ত চিত্র সেখানে রাখুন।
এখন সূচি / চিত্রসমূহ ফোল্ডারের ইনডেক্স.জেএস (রিসোর্স / চিত্রগুলিতে) নামে একটি ফাইল তৈরি করুন যা সমস্ত চিত্রকে সূচক করার জন্য দায়ী ।

কনস্ট ইমেজ = {'ইমেজ 1': প্রয়োজনীয় ('./ 1.png'), 'চিত্র 2': প্রয়োজন ('./ 2.png'), 'চিত্র3': প্রয়োজন ('./ 3.png')}

এখন আপনার পছন্দের ফোল্ডারটিতে ইমেজভিউ নামের একটি উপাদান তৈরি করুন। কেউ কার্যক্ষম, শ্রেণি বা ধ্রুবক উপাদান তৈরি করতে পারেন। আমি কনস্টেন্ট উপাদান ব্যবহার করেছি। এই ফাইলটি সূচকের উপর নির্ভর করে চিত্রটি ফিরিয়ে দেওয়ার জন্য দায়ী।

import React from 'react';
import { Image, Dimensions } from 'react-native';
import Images from './Index';
const ImageView = ({ index }) => {
    return (
        <Image
            source={Images['image' + index]}
        />
    )
}
export default ImageView;

এখন উপাদানটি থেকে যেখানেই আপনি স্ট্যাটিক চিত্রগুলি গতিশীলভাবে রেন্ডার করতে চান, কেবল চিত্রভিউ উপাদানটি ব্যবহার করুন এবং সূচিটি পাস করুন।

<ইমেজভিউ সূচক = {this.qno + 1} />

Question 15

আপনি এটির জন্য একটি অবজেক্ট ব্যবহার করা উচিত।

উদাহরণস্বরূপ, ধরা যাক যে আমি একটি এআইপিএজে একটি এজেএক্স অনুরোধ করেছি এবং এটি এমন একটি চিত্রের লিঙ্ক দেয় যা আমি এই অবস্থায় সংরক্ষণ করব imageLink:

source={{uri: this.state.imageLink}}