নতুন প্রতিক্রিয়া নেটিভ মধ্যে একটি পূর্ণ পর্দার পটভূমি চিত্র যুক্ত করার সেরা উপায় কি

Question

আমি ভিউতে একটি পূর্ণ-স্ক্রিন চিত্র যুক্ত করতে চেয়েছিলাম তাই আমি এই কোডটি লিখি

return (
    <View style={styles.container}>
        <Image source={require('image!egg')}  style={styles.backgroundImage}/>
    </View>
)

এবং শৈলী হিসাবে সংজ্ঞায়িত

var styles = StyleSheet.create({
container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     flexDirection: 'column',
},
     backgroundImage:{
     width:320,
     height:480,
   }
...

তবে এইভাবে আমি কীভাবে আসল আইফোনের পর্দার আকার খুঁজে পাব?

আমি পিক্সেল ঘনত্ব অ্যাক্সেসের জন্য একটি এপিআই দেখেছি তবে স্ক্রিনের আকার সম্পর্কে কিছুই নেই ...

কোন ধারণা?

Comments

পারফরম্যান্স সম্পর্কে কীভাবে? এটি ব্যবহার করা ঠিক আছে .pngনাকি .jpg? অ্যাপ ডিরেক্টরি ডিরেক্টরি গাছের ভিতরে ওয়ালপেপার চিত্র সংরক্ষণ করা ঠিক আছে? বা অন্য কিছু ব্যবহার করা ভাল? .svgঅথবা যেকোন কিছু?

— সবুজ

Answer 1

পুরো স্ক্রিনটি পূরণ করার জন্য আপনি flex: 1কোনও <Image>উপাদানের স্টাইলিং ব্যবহার করতে পারেন । তারপরে আপনি চিত্রটি পুরোপুরি উপাদানটি পূরণ করতে চিত্রের আকার পরিবর্তনগুলির একটি ব্যবহার করতে পারেন:

<Image source={require('image!egg')} style={styles.backgroundImage} />

শৈলী:

import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

আমি নিশ্চিত যে আপনি <View>নিজের ইমেজ মোড়ানো থেকে মুক্তি পেতে পারেন এবং এটি কাজ করবে।

Comments

হ্যাঁ, এটি কাজ করে, আমি চিত্র উপাদানটিকে সর্বাধিক হিসাবে স্থানান্তরিত করেছি এবং এর শৈলীকে backgroundImage:{ justifyContent: 'center', alignItems: 'center', flex: 1, resizeMode: Image.resizeMode.contain, },ধন্যবাদ হিসাবে সেট করেছি

— টালপাজ ২৮:৪7 এ

এর সাথে কিছুক্ষণ লড়াই করার পরে পর্দার অন্যান্য সামগ্রীর পিছনে পটভূমির চিত্রটি প্রদর্শিত হওয়ার অনুমতি দেওয়ার জন্য Imageউপাদানটিকে একেবারে স্থিতিতে মোড়ানো সবচেয়ে সহজ View।

— জোশ হাবদাস

গুরুত্বপূর্ণ সম্পাদনা: <Image src=...>এখন<Image source=...>

— ব্যবহারকারীর নাম

এখন যে জেড-ইনডেক্স সমর্থিত, আপনি কি এই উত্তরটি পরিবর্তন করবেন?

— মাকেনোভা

এটি ঠিক আছে তবে চিত্রটি প্রসারিত এবং স্ক্রোলটি সক্ষম হয়েছে

— অনন্ত প্রসাদ

Answer 2

(এটি এখন অবচয় করা হয়েছে আপনি ইমেজব্যাকগ্রাউন্ড ব্যবহার করতে পারেন )

এইভাবে আমি এটি করেছি। মূল চুক্তি স্থির স্থির আকারগুলি থেকে মুক্তি পাচ্ছিল।

class ReactStrap extends React.Component {
  render() {
    return (
      <Image source={require('image!background')} style={styles.container}>
        ... Your Content ...
      </Image>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    // remove width and height to override fixed static size
    width: null,
    height: null,
  }
};

Comments

হ্যাঁ, এটি ডক্স ফেসবুক.

— ড্যানিয়েল স্টেইগারওয়াল্ড

এটি সেরা উত্তর!

— ভ্যানসন উইং লেউং

ধন্যবাদ! নিশ্চিত হয়ে নিন যে এটি Imageআপনার প্রথম উপাদানটি ফেরত এসেছে container প্রথমদিকে, আমি দুর্ঘটনাক্রমে Imageএকটি Viewপাত্রে ছিল এমন একটির ভিতরে বাসা বাঁধলাম ।

— Glavin001

ইয়েলোবক্স.জেএস: 76 76 বাচ্চাদের সাথে <চিত্র> ব্যবহার করা অবচিত করা হয়েছে এবং নিকট ভবিষ্যতে এটি একটি ত্রুটি হবে be দয়া করে বিন্যাসটি পুনর্বিবেচনা করুন বা এর পরিবর্তে << চিত্রব্যাকগ্রাউন্ড> ব্যবহার করুন। আমি যখন <ইমেজ> এ লিখিত সামগ্রী যুক্ত করব তখন এই সতর্কতাটি প্রদর্শিত হবে। এটা আসলে খুব বিরক্তিকর.

— ওয়েন

এটি আসলে হ্রাস করা হয়। ইমেজব্যাকগ্রাউন্ড বা (সেরা) অবস্থান ব্যবহার করুন: নিরঙ্কুশ

— মাইকের

Answer 3

দ্রষ্টব্য: এই সমাধানটি পুরানো। পড়ুন দয়া করে https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting পরিবর্তে

এই সমাধান চেষ্টা করুন। এটি সরকারীভাবে সমর্থিত। আমি এটি পরীক্ষা করেছি এবং নির্দ্বিধায় কাজ করি।

var styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
  }
});

এবং এটি ব্যাকগ্রাউন্ড চিত্র হিসাবে ব্যবহার করার জন্য, কেবল নিম্নলিখিত করুন।

<Image style={styles.backgroundImage}>
  <View>
    <Text>All your stuff</Text>
  </View>
</Image>

Comments

কী, এটি সরকারীভাবে সমর্থিত?

— rclai

হ্যাঁ. এইটা. ফেসবুক.

— github.io/react-native/docs/…

এখানে alignSelfএবং ব্যবহার কি width?

— হরকিরাত সলুজা

আপনি <ইমেজ /> প্রস্থে প্রসারিত করছেন এবং প্রসারিতকে 'প্রসারিত' কাজ করার জন্য শূন্য করতে হবে

— বিনোদ সোবালে

এফওয়াইআই, চিত্রের উপাদানগুলির প্রতিক্রিয়া (0.51.0) এর সর্বশেষ সংস্করণে শিশু থাকতে পারে না। এটি আর কাজ করে না।

— rplankenhorn

Answer 4

আমি প্রতিক্রিয়ার নেটিভ সংস্করণ = 0.19.0 ব্যবহার করে অ্যান্ড্রয়েডের জন্য কোনও লাভের এই উত্তরগুলির বেশ কয়েকটিতে চেষ্টা করেছি।

কোনও কারণে, আমার স্টাইলশীটের অভ্যন্তরে পুনরায় আকারের মোড সঠিকভাবে কাজ করে না? যাইহোক, যখন সিলেটশীট ছিল

backgroundImage: {
flex: 1,
width: null,
height: null,
}

এবং, চিত্র ট্যাগের মধ্যে আমি পুনরায় আকারটি নির্দিষ্ট করেছিলাম:

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

এটা পুরোপুরি কাজ! উপরে উল্লিখিত হিসাবে, আপনি Image.resizeMode.cover ব্যবহার করতে পারেন বা পাশাপাশি রাখতে পারেন।

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

Answer 5

ইমেজ ব্যবহার করে মার্চ 2018 আপডেট করুন ইমেজব্যাকগ্রাউন্ডের ব্যবহার অবচিত করা হয়েছে

  <ImageBackground 
          source={{uri: 'https://images.pexels.com/photos/89432/pexels-photo-89432.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb'}}
          style={{ flex: 1,
            width: null,
            height: null,
            }}
        >
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Your Contents</Text>
       </View>

 </ImageBackground >

Comments

ডকুমেন্টেশন: ফেসবুক.

— জয়

এটি সঠিক, এখন আপনাকে ইমেজব্যাকগ্রাউন্ড ব্যবহার করতে হবে, একটি ধারক হিসাবে চিত্র হ্রাস করা হয়েছে। এখানে একটি ধারক হিসাবে দেখার প্রয়োজন নেই আপনি কেবল প্রধান পাত্রে হিসাবে ইমেজব্যাকগ্রাউন্ড ব্যবহার করতে পারেন।

— ডিয়েগো অনানু

Answer 6

উপর ভিত্তি করে ব্র্যাডেন রকওয়েল নেপিয়ের এর উত্তর , আমি এই তৈরি BackgroundImageউপাদান

BackgroundImage.js

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

class BackgroundImage extends Component {
  render() {
    const {source, children, style, ...props} = this.props
    return (
      <Image source={ source }
             style={ { flex: 1, width: null, height: null, ...style } }
             {...props}>
        { children }
      </Image>
    )
  }
}
BackgroundImage.propTypes = {
  source: React.PropTypes.object,
  children: React.PropTypes.object,
  style: React.PropTypes.object
}
export default BackgroundImage

someWhereInMyApp.js

 import BackgroundImage from './backgroundImage'
 ....
 <BackgroundImage source={ { uri: "https://facebook.github.io/react-native/img/header_logo.png" } }>
    <Text>Test</Text>
 </BackgroundImage>

Answer 7

আপনি যদি এটি ব্যাকগ্রাউন্ড ইমেজ হিসাবে ব্যবহার করতে চান তবে আপনাকে জুন 2017 এর শেষ দিকে v0.46 এ নতুন নতুন <ImageBackground>উপাদানটি ব্যবহার করতে হবে । এটি বাসা বাঁধাকে সমর্থন করে যখন শীঘ্রই হবে না।<Image>

প্রতিশ্রুতি সংক্ষিপ্ত বিবরণ এখানে :

আমরা উপাদানগুলির ভিতরে নেস্টিং ভিউগুলির সমর্থন সরিয়ে দিচ্ছি। আমরা এটি করার সিদ্ধান্ত নিয়েছি কারণ এই বৈশিষ্ট্যটি intrinsinc content sizeথাকা <Image>অসম্ভবকে সমর্থন করে ; সুতরাং যখন রূপান্তর প্রক্রিয়াটি সম্পূর্ণ হয়, তখন চিত্রের আকারটি স্পষ্টভাবে নির্দিষ্ট করার প্রয়োজন হবে না, এটি প্রকৃত চিত্র বিটম্যাপ থেকে অনুমান করা যায়।

এবং এটি # 0 পদক্ষেপ।

খুব সাধারণ ড্রপ-ইন প্রতিস্থাপন যা খুব সাধারণ স্টাইলিংয়ের মাধ্যমে এই কার্যকারিতাটি কার্যকর করে। দয়া করে কিছু ভিতরে রাখতে চাইলে পরিবর্তে ব্যবহার করুন।

Answer 8

ইমেজব্যাকগ্রাউন্ডে আপডেট করুন

যেহেতু <Image />একটি ধারক হিসাবে ব্যবহার করা কিছু সময়ের জন্য অবনমিত হয়, সমস্ত উত্তর আসলে গুরুত্বপূর্ণ কিছু মিস করে। সঠিক ব্যবহারের জন্য চয়ন <ImageBackground />সঙ্গে style এবং imageStyle ঠেকনা। সমস্ত চিত্র সম্পর্কিত স্টাইল প্রয়োগ করুন imageStyle।

উদাহরণ স্বরূপ:

<ImageBackground
    source={yourImage}
    style={{
      backgroundColor: '#fc0',
      width: '100%', // applied to Image
      height: '100%' 
    }}
    imageStyle={{
      resizeMode: 'contain' // works only here!
    }}
>
    <Text>Some Content</Text>
</ImageBackground>

https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js

Answer 9

ওহ Godশ্বর শেষ পর্যন্ত আমি প্রতিক্রিয়া-নেটিভ ভি 0.52-আরসি এবং নেটিভ-বেসের জন্য দুর্দান্ত উপায় খুঁজে পেয়েছি:

আপনার সামগ্রী ট্যাগটি এর মতো কিছু হওয়া উচিত: // ======================================== =======================

<Content contentContainerStyle={styles.container}>
    <ImageBackground
        source={require('./../assets/img/back.jpg')}
        style={styles.backgroundImage}>
        <Text>
            Some text here ...
        </Text>
    </ImageBackground>
</Content>

এবং আপনার প্রয়োজনীয় শৈলীটি হল: // =========================================== ====================

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
backgroundImage:{
    flex : 1,
    width : '100%'
}

এটা ভাল কাজ করে বন্ধু ... মজা করুন

Comments

হাই, কেবল নিশ্চিত করতে চাই যে ইমেজব্যাকগ্রাউন্ডটি কোথা থেকে আমদানি করা হয়েছে?

— রুডল্ফ অপারম্যান

ঠিক আছে তাই চিত্রব্যাকগ্রাউন্ড আমি প্রতিক্রিয়া-নেটিভ থেকে আমদানি করেছি তবে আমি এটি দিয়ে সেট করতে পারি না: 100%

— রুডলফ অপারম্যান

আপনি কি কখনও কোনও ইস্যুতে চালিত হন যেখানে এটি অ্যান্ড্রয়েড এমুলেটরটিতে প্রদর্শিত হয় তবে ডিভাইসে নয়?

— রুদলফ অপারম্যান

আমার দেরিতে উত্তরের জন্য দুঃখিত, আপনি প্রতিক্রিয়া নেটিভ থেকে ইমেজব্যাকগ্রাউন্ড আমদানি করতে পারেন: 'রিয়েট-নেটিভ' থেকে আমদানি করুন {চিত্রব্যাকগ্রাউন্ড;; জাদুকরী ডিভাইস আপনি পরীক্ষা করেছেন? আমি ডিভাইসে কোনও সমস্যা পাইনি।

— আলী এসফান্দিয়ারি

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

— রুডলফ অপারম্যান

Answer 10

0.14 যেহেতু এই পদ্ধতিটি কাজ করবে না, তাই আমি একটি স্থিতিশীল উপাদান তৈরি করেছি যা আপনাকে ছেলেদের জন্য সহজ করে তুলবে। আপনি কেবল এটিকে আটকান বা উপাদান হিসাবে এটি উল্লেখ করতে পারেন।

এটি পুনঃব্যবহারযোগ্য হওয়া উচিত এবং এটি আপনাকে অতিরিক্ত শৈলী এবং বৈশিষ্ট্য যুক্ত করার অনুমতি দেবে যদি এটি মানক <Image />উপাদান হয়

const BackgroundImage = ({ source, children, style, ...props }) => {
  return (
      <Image
        source={source}
        style={{flex: 1, width: null, height: null, ...style}}
        {...props}>
        {children}
      </Image>
  );
}

এটি এটিকে আটকান এবং তারপরে আপনি এটি চিত্রের মতো ব্যবহার করতে পারেন এবং এটি যে ভিউটিতে রয়েছে তার পুরো আকারের সাথে এটি ফিট করা উচিত (সুতরাং এটি যদি শীর্ষ দৃষ্টিভঙ্গি হয় তবে এটি আপনার স্ক্রিনটি পূরণ করবে)।

<BackgroundImage source={require('../../assets/backgrounds/palms.jpg')}>
    <Scene styles={styles} {...store} />
</BackgroundImage>

প্রাকদর্শন চিত্রের জন্য এখানে ক্লিক করুন

Answer 11

অক্টোবর 17 এর সর্বশেষ (আরএন> = .46)

import React from 'react';
import { 
  ...
  ImageBackground,
} from 'react-native';

render() {
  return (
    <ImageBackground source={require('path/to/img')} style={styles.urStyle}>
    </ImageBackground>
  );
}

http://facebook.github.io/react-native/releases/0.49/docs/images.html#background-image-via-nesting

Answer 12

এই ব্যবহারের কেসটি পরিচালনা করতে, আপনি <ImageBackground>উপাদানটি ব্যবহার করতে পারেন , যার মতো প্রপস রয়েছে<Image> এবং এটিতে যে কোনও বাচ্চাকে আপনি স্তর রাখতে চান এটি যুক্ত করতে পারেন।

উদাহরণ:

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

আরও জন্য: ইমেজব্যাকগ্রাউন্ড | নেটিভ প্রতিক্রিয়া

নোট করুন যে আপনাকে অবশ্যই কিছু প্রস্থ এবং উচ্চতা শৈলীর বৈশিষ্ট্য নির্দিষ্ট করতে হবে।

Answer 13

আপনার ইমেজটির আকার পরিবর্তন করতে হবে মোড = {ইমেজ.স্রিজমোড.কন্টেন} বা {ইমেজ.রেজমোড.স্ট্রেচ} এবং চিত্রের শৈলীর প্রস্থটি বাতিল করতে হবে

<Image source={CharacterImage} style={{width: null,}} resizeMode={Image.resizeMode.contain}/>

Answer 14

মান নাল সহ প্রস্থ এবং উচ্চতা আমার পক্ষে কাজ করে না, তারপরে আমি উপরে, নীচে, বাম এবং ডান অবস্থানটি ব্যবহার করার চিন্তা করেছি এবং এটি কার্যকর। উদাহরণ:

bg: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        resizeMode: 'stretch',
},

এবং জেএসএক্স:

<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />

Answer 15

(আরএন> = .46)

আপনি যদি চিত্রটির শীর্ষে কন্টেন্ট রেন্ডার করতে চান তবে উপাদানটি শিশুদের ধারণ করতে পারে না, পরম অবস্থানের ব্যবহার বিবেচনা করুন।

অথবা আপনি ইমেজব্যাকগ্রাউন্ড ব্যবহার করতে পারেন

import React from 'react';
import { 
  ...
  StyleSheet,
  ImageBackground,
} from 'react-native';

render() {
  return (
    
  <ImageBackground source={require('path/to/img')} style={styles.backgroundImage} >
      <View style={{flex: 1, backgroundColor: 'transparent'}} />
      <View style={{flex: 3,backgroundColor: 'transparent'}} >
  </ImageBackground>
    
  );
}

const styles = StyleSheet.create({
  backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    },
});

Answer 16

ব্যাকগ্রাউন্ড কার্যকর করার সহজ উপায়:

<ImageBackground style={styles.container} source={require('../../images/screen_login.jpg')}>
  <View style={styles.logoContainer}>
    <Image style={styles.logo}
      source={require('../../images/logo.png')}
    />
  </View> 
  <View style={styles.containerTextInput}>
    < LoginForm />
  </View>   
</ImageBackground>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //   backgroundColor:"#0984e3"
  },
  containerTextInput: {
    marginTop: 10,
    justifyContent: 'center'
  },

  logoContainer: {
    marginTop: 100,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logo: {
    height: 150,
    width: 150
  }
});

Answer 17

আমার জন্য এটি দুর্দান্ত কাজ করে, আমি ব্যাকগ্রাউন্ড চিত্র সেট করতে ইমেজব্যাকগ্রাউন্ড ব্যবহার করেছি:

import React from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Image, ImageBackground } from 'react-native';
const App: () => React$Node = () => {
return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={styles.container}> 
      <ImageBackground source={require('./Assets.xcassets/AppBackGround.imageset/2x.png')} style={styles.backgroundImage}>
        <View style={styles.sectionContainer}>
              <Text style={styles.title}>Marketing at the speed of today</Text>
        </View>
      </ImageBackground>
      </View>
    </>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    fontFamily: "-apple-system, BlinkMacSystemFont Segoe UI",
    justifyContent: "center",
    alignItems: "center",
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    height: '100%',
    width: '100%'
  },
  title:{
    color: "#9A9A9A",
    fontSize: 24,
    justifyContent: "center",
    alignItems: "center",
  },
sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
});

export default App;

Answer 18

import { ImageBackground } from "react-native";
<ImageBackground
     style={{width: '100%', height: '100%'}}
     source={require('../assets/backgroundLogin.jpg ')}> //path here inside
    <Text>React</Text>
</ImageBackground>

Answer 19

যদি আপনি এখনও এটি সমাধান করেননি তবে রিটিজ নেটিভ v.0.42.0 এর রিসাইজমোড রয়েছে

<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />

Answer 20

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

export default class App extends Component {
  render() {
    return (
      <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage} />
    );
  }
}

const s = StyleSheet.create({
  backgroundImage: {
      flex: 1,
      width: null,
      height: null,
  }
});

আপনি এটি এখানে চেষ্টা করতে পারেন: https://sketch.expo.io/B1EAShDie (থেকে: github.com/Dorian/sketch-reactive-native-apps )

দস্তাবেজ: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

Answer 21

আপনি নিজের চিত্রটি একটি ধারক হিসাবেও ব্যবহার করতে পারেন:

render() {
    return (
        <Image
            source={require('./images/background.png')}
            style={styles.container}>
            <Text>
              This text will be on top of the image
            </Text>
        </Image>
    );
}


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

Answer 22

আমি ব্যাকগ্রাউন্ডআইমেজ ব্যবহার করার কথা শুনেছি কারণ ভবিষ্যতে আপনি ইমেজ ট্যাগটি বাসাতে সক্ষম হবেন না বলে মনে করা হচ্ছে। তবে আমার ব্যাকগ্রাউন্ডটি সঠিকভাবে প্রদর্শন করতে আমি ব্যাকগ্রাউড ইমেজ পেতে পারি না। আমি যা করেছি তা হল একটি ভিউ ট্যাগের ভিতরে আমার ইমেজকে নীড় এবং চিত্রটি বাইরের দৃশ্যের পাশাপাশি শৈলী। কীগুলি নালায় প্রস্থ স্থাপন করছিল, এবং পুনরায় আকারের মোডকে 'প্রসারিত' এ সেট করছিল। নীচে আমার কোডটি দেওয়া হয়েছে:

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

export default class BasicImage extends Component {
	constructor(props) {
	  super(props);

	  this.state = {};
	}

	render() {
		return (
			<View style={styles.container}>
	      <Image 
	        source={this.props.source}
	        style={styles.backgroundImage}
	      />
      </View>
		)
	}
}

const styles = StyleSheet.create({   
		container: {
			flex: 1,
			width: null,
			height: null,
			marginBottom: 50
		},
    text: {
    		marginLeft: 5,
    		marginTop: 22,
    		fontFamily: 'fontawesome',
        color: 'black',
        fontSize: 25,
        backgroundColor: 'rgba(0,0,0,0)',
    },
		backgroundImage: {
			flex: 1,
			width: null,
			height: null,
			resizeMode: 'stretch',
		}
});

Answer 23

<ImageBackground>ইতিমধ্যে এন্টোয়াইন 129 দ্বারা বলা হিসাবে ব্যবহার করুন । <Image>বাচ্চাদের সাথে ব্যবহার করা এখন অবমূল্যায়িত।

class AwesomeClass extends React.Component {
  render() {
    return (
      <ImageBackground source={require('image!background')} style={styles.container}>
        <YourAwesomeComponent/>
      </ImageBackground>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
};

Answer 24

আর একটি সহজ সমাধান:

<Image source={require('../assets/background.png')}
      style={{position: 'absolute', zIndex: -1}}/>

<View style={{flex: 1, position: 'absolute'}}>

  {/*rest of your content*/}
</View>

Answer 25

আমি এই কোডটি ব্যবহার করে আমার পটভূমির ইমেজ সমস্যার সমাধান করেছি।

import React from 'react';
import { StyleSheet, Text, View,Alert,ImageBackground } from 'react-native';

import { TextInput,Button,IconButton,Colors,Avatar } from 'react-native-paper';

class SignInScreen extends React.Component {

    state = {
       UsernameOrEmail  : '',
       Password : '',
     }
    render() {
      return (
             <ImageBackground  source={require('../assets/icons/background3.jpg')} style {styles.backgroundImage}>
              <Text>React Native App</Text>
            </ImageBackground>
          );
    }
  }


    export default SignInScreen;

    const styles = StyleSheet.create({
     backgroundImage: {
      flex: 1,
      resizeMode: 'cover', // or 'stretch'
     }
   });

Answer 26

ইমেজব্যাকগ্রাউন্ডের সীমা থাকতে পারে

আসলে, আপনি সরাসরি ব্যবহার করতে পারেন এবং এটি অবচয় হয় না।

আপনি যদি প্রতিক্রিয়া নেটিভ এ ব্যাকগ্রাউন্ড চিত্র যুক্ত করতে চান এবং সেই ব্যাকগ্রাউন্ড চিত্রটিতে অন্যান্য উপাদান যুক্ত করতে চান তবে নীচের পদক্ষেপটি অনুসরণ করুন:

1. একটি ধারক দেখুন তৈরি করুন
2. 100% প্রস্থ এবং উচ্চতা সহ একটি চিত্র উপাদান তৈরি করুন। এছাড়াও আকার পরিবর্তন করুন: 'কভার'
3. পজিশন সহ ইমেজ এলিমেন্টের অধীনে আরেকটি ভিউ এলিমেন্ট তৈরি করুন: 'পরম'

এই কোডটি আমি ব্যবহার করি:

import React, { Component } from 'react';
import {Text, View, Image} from 'react-native';
import Screen from '../library/ScreenSize'

export default class MenuScreen extends Component {
    static navigationOptions = {
      header: null
    }
    render() {
        return (
          <View style={{ flex: 1 }}>
            <Image
              style={{
                resizeMode: "cover",
                width: "100%",
                height: "100%",
                justifyContent: "center",
                alignItems: "center",
                opacity: 0.4
              }}
              source={require("../assets/images/menuBackgroundImage.jpg")}
            ></Image>

            <View style={{
                width: Screen.width,
                height: Screen.height * 0.55,
                position: 'absolute',
                bottom: 0}}>
                <Text style={{
                    fontSize: 48
                }}>Glad to Meet You!</Text>
            </View>
          </View>
        );
    }
}

কোডিং উপভোগ করুন ....

আউটপুট: