আমি কি প্রতিক্রিয়া নেটিভ এ গতিশীল শৈলী করতে পারি?

Question

বলুন আমার এর মতো রেন্ডার সহ একটি উপাদান রয়েছে:

<View style={jewelStyle}></View>

যেখানে জুয়েল স্টাইল =

  {
    borderRadius: 10,
    backgroundColor: '#FFEFCC',
    width: 20,
    height: 20,
  },

আমি কীভাবে পটভূমির রঙকে গতিময় এবং এলোমেলোভাবে নির্ধারিত করতে পারি? আমি চেষ্টা করেছিলাম

  {
    borderRadius: 10,
    backgroundColor: getRandomColor(),
    width: 20,
    height: 20,
  },

তবে এটি ভিউয়ের সমস্ত দৃষ্টিকোণের রঙ একই হয়, আমি চাই প্রতিটি একক অনন্য হোক।

কোন টিপস?

Answer 1

আমি সাধারণত কিছু কিছু করি:

<View style={this.jewelStyle()} />

...

jewelStyle = function(options) {
   return {
     borderRadius: 12,
     background: randomColor(),
   }
 }

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

var myColor = randomColor()
<View style={jewelStyle(myColor)} />

...

jewelStyle = function(myColor) {
   return {
     borderRadius: 10,
     background: myColor,
   }
 }

Comments

এই পদ্ধতিটি স্টাইলশিটগুলি মোটেই ব্যবহার করে না। স্টাইলশিটগুলি Stylesheet.create()যেভাবেই ঘোষণা করার উদ্দেশ্য কী ?

— ফতুহোকু

@fatuhoku এটা যখন আপনি একাধিক স্থানে একই শৈলী পুনরায় ব্যবহার করার জন্য প্রয়োজন জন্য চমৎকার

— Bob9630

স্টাইলসীট.ক্রিয়েট ব্যবহার করার কি কোনও পারফেক্ট সুবিধা রয়েছে?

— ডোমিনিক

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

— সসপেড্রা

Answer 2

হ্যাঁ আপনি করতে পারেন এবং বাস্তবে StyleSheet.createআপনার স্টাইলগুলি তৈরি করতে আপনার ব্যবহার করা উচিত ।

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

class Header extends Component {
    constructor(props){
        super(props);
    }    

    render() {
        const { title, style } = this.props;
        const { header, text } = defaultStyle;
        const combineStyles = StyleSheet.flatten([header, style]);    

        return (
            <View style={ combineStyles }>
                <Text style={ text }>
                    { title }
                </Text>
            </View>
        );
    }
}    

const defaultStyle = StyleSheet.create({
    header: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.4,
        elevation: 2,
        position: 'relative'
    },
    text: {
        color: '#0d4220',
        fontSize: 16
    }
});    

export default Header;

এবং তারপর:

<Header title="HOME" style={ {backgroundColor: '#10f1f0'} } />

Comments

এই উত্তরটি একটি ভাল উদাহরণ দেখায় যেখানে স্টাইলশীটে একটি শৈলী সংজ্ঞায়িত করা হয় তবে এটি পরে কোনও উপাদানে ওভাররাইড করা যায়

— বিটস্যান্ড

আফাকের সাহায্যে ডক্সে যেমন বলা হয়েছে তেমন StyleSheet.flattenকোনও অপ্টিমাইজেশন ছুঁড়ে ফেলেছে StyleSheet.create: "দ্রষ্টব্য: এটিকে অপব্যবহার হিসাবে সাবধানতা অবলম্বন করাই অপ্টিমাইজেশনের ক্ষেত্রে আপনাকে কর দিতে পারে ID আইডিগুলি সাধারণভাবে ব্রিজ এবং মেমরির মাধ্যমে অপ্টিমাইজেশন সক্ষম করে style এই অপটিমাইজেশন। " ( facebook.github.io/react-native/docs/stylesheet.html )।

— গুস্তাভোপচ

Answer 3

আপনি যদি এখনও সুবিধা গ্রহণ করতে চান StyleSheet.createএবং গতিশীল শৈলীও পেতে চান তবে এটি ব্যবহার করে দেখুন:

const Circle = ({initial}) => {


const initial = user.pending ? user.email[0] : user.firstName[0];

    const colorStyles = {
        backgroundColor: randomColor()
    };

    return (
        <View style={[styles.circle, colorStyles]}>
            <Text style={styles.text}>{initial.toUpperCase()}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    circle: {
        height: 40,
        width: 40,
        borderRadius: 30,
        overflow: 'hidden'
    },
    text: {
        fontSize: 12,
        lineHeight: 40,
        color: '#fff',
        textAlign: 'center'
    }
});

আপনার স্টাইলশীটটি আপনার গতিশীল স্টাইলগুলির সাথে একত্রিত styleকরে কীভাবে এর সম্পত্তি Viewসেট করা আছে তা লক্ষ্য করুন ।

Answer 4

সবচেয়ে সহজটি আমার:

<TextInput
  style={[
    styles.default,
    this.props.singleSourceOfTruth ?
    { backgroundColor: 'black' } 
    : { backgroundColor: 'white' }
]}/>

Comments

আমি @

— সারাহা কার্টেনজ

দুর্দান্ত, এটা সত্যিই দুর্দান্ত। এই সমাধানের মাধ্যমে কেউ কোনও সম্পত্তি ওভাররাইড করতে পারে, তাই না?

— শেষগুলি

Answer 5

সিনট্যাকটিকভাবে কিছু সমস্যা ছিল। এটি আমার পক্ষে কাজ করেছে

<Text style={[styles.textStyle,{color: 'red'}]}> Hello </Text>

const styles = StyleSheet.create({
   textStyle :{
      textAlign: 'center',   
      fontFamily: 'Arial',
      fontSize: 16
  }
  });

Comments

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

— টিএলই করুন

Answer 6

আপনি এই জাতীয় কিছু চাইবেন:

var RandomBgApp = React.createClass({
    render: function() {

        var getRandomColor = function() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++ ) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        };

        var rows = [
            { name: 'row 1'},
            { name: 'row 2'},
            { name: 'row 3'}
        ];

        var rowNodes = rows.map(function(row) {
            return <Text style={{backgroundColor:getRandomColor()}}>{row.name}</Text>
        });

        return (
            <View>
                {rowNodes}
            </View>
        );

    }
});

এই উদাহরণে আমি উপাদানগুলিতে সারিগুলির জন্য ডেটা সম্বলিত সারিগুলি অ্যারে গ্রহণ করি এবং এটি পাঠ্য উপাদানগুলির অ্যারেতে ম্যাপ করি। আমি getRandomColorযখনই একটি নতুন পাঠ্য উপাদান তৈরি করি তখন আমি ফাংশনটিতে কল করতে ইনলাইন স্টাইলগুলি ব্যবহার করি।

আপনার কোড সহ সমস্যাটি হ'ল আপনি একবার স্টাইলটি সংজ্ঞায়িত করেন এবং তাই র্যান্ডম কালারটি কেবল একবার কল হয় - যখন আপনি শৈলীর সংজ্ঞা দেন।

Comments

হাই কলিন, তার জন্য ধন্যবাদ, তবে আমি কীভাবে একই সাথে অন্যান্য স্টাইলের পরামিতিগুলিতে পাস করতে পারি?

— পিট থর্ন

আপনার অর্থ শৈলী = {{ব্যাকগ্রাউন্ডের মতো: রঙ: getRandomColor (), রঙ: 'কালো'}}?

— কলিন রামসে

ধন্যবাদ, এটি কার্যকর হবে তবে আমি অন্য উত্তরটি গ্রহণ করেছি কারণ এটি আপনাকে কীভাবে একসাথে শৈলীর একটি ব্লক পাস করতে পারে তা প্রদর্শন করতে সহায়তা করে।

— পিট থর্ন

আমি আসলে মনে করি অন্য উত্তরটিও এটির চেয়ে ভাল ছিল :)

— কলিন রামসে

Answer 7

আমি জানি এটি অত্যন্ত দেরী, তবে যে কেউ এখনও ভাবছেন যে এখানে একটি সহজ সমাধান।

আপনি কেবল শৈলীর জন্য একটি অ্যারে তৈরি করতে পারেন:

this.state ={
   color: "#fff"
}

style={[
  styles.jewelstyle, {
  backgroundColor: this.state.BGcolor
}

দ্বিতীয়টি স্টাইলশিটে বর্ণিত কোনও মূল পটভূমির রঙকে ওভাররাইড করবে। তারপরে একটি ফাংশন থাকুন যা রঙ পরিবর্তন করে:

generateNewColor(){
  var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
  this.setState({BGcolor: randomColor})
}

এটি একটি এলোমেলো হেক্স রঙ উত্পন্ন করবে। তারপরে কেবল সেই ফাংশনটি কল করুন যখনই এবং বাম, নতুন পটভূমির রঙ।

Answer 8

আমি জানি যে এর বেশ কয়েকটি উত্তর রয়েছে তবে আমি মনে করি সবচেয়ে ভাল এবং সবচেয়ে সহজ একটি রাষ্ট্রকে "পরিবর্তন করতে" ব্যবহার করা রাষ্ট্রের উদ্দেশ্য।

export default class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
          style: {
              backgroundColor: "white"
          }
      };
    }
    onPress = function() {
      this.setState({style: {backgroundColor: "red"}});
    }
    render() {
       return (
          ...
          <View style={this.state.style}></View>
          ...
       )
    }

}

Answer 9

আপনি স্টাইল অবজেক্টের সাথে সরাসরি রাষ্ট্রীয় মানকে বাঁধতে পারেন। এখানে একটি উদাহরণ:

class Timer extends Component{
 constructor(props){
 super(props);
 this.state = {timer: 0, color: '#FF0000'};
 setInterval(() => {
   this.setState({timer: this.state.timer + 1, color: this.state.timer % 2 == 0 ? '#FF0000' : '#0000FF'});
 }, 1000);
}

render(){
 return (
   <View>

    <Text>Timer:</Text>
    <Text style={{backgroundColor: this.state.color}}>{this.state.timer}</Text>
  </View>
 );
 }
}

Answer 10

হ্যাঁ, আপনি গতিশীল স্টাইল তৈরি করতে পারেন। আপনি উপাদানগুলি থেকে মানগুলি পাস করতে পারেন।

প্রথমে স্টাইলশিটফ্যাক্টরি.জেএস তৈরি করুন

import { StyleSheet } from "react-native";
export default class StyleSheetFactory {
  static getSheet(backColor) {
    return StyleSheet.create({
      jewelStyle: {
        borderRadius: 10,
        backgroundColor: backColor,
        width: 20,
        height: 20,
      }
    })
  }
}

তারপরে এটি আপনার উপাদানগুলিতে নিম্নলিখিত উপায়ে ব্যবহার করুন

import React from "react";
import { View } from "react-native";
import StyleSheetFactory from './StyleSheetFactory'
class Main extends React.Component {
  getRandomColor = () => {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

  render() {
    return (
      <View>
        <View
          style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
        />
        <View
          style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
        />
        <View
          style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
        />
      </View>
    );
  }
}

Answer 11

অবজেক্ট স্প্রেড অপারেটর ব্যবহার করে "..." আমার পক্ষে কাজ করেছে:

<View style={{...jewelStyle, ...{'backgroundColor': getRandomColor()}}}></View>

Answer 12

উদাহরণস্বরূপ আপনি যদি ফিল্টারগুলি সহ কোনও স্ক্রিন ব্যবহার করছেন এবং আপনি ফিল্টারটি নির্বাচিত হয়েছিল কিনা তা নির্ধারণ করতে চান, আপনি এটি করতে পারেন:

<TouchableOpacity style={this.props.venueFilters.includes('Bar')?styles.filterBtnActive:styles.filterBtn} onPress={()=>this.setFilter('Bar')}>
<Text numberOfLines={1}>
Bar
</Text>
</TouchableOpacity>

কোন সেট ফিল্টারটি হল:

setVenueFilter(filter){
  var filters = this.props.venueFilters;
  filters.push(filter);
  console.log(filters.includes('Bar'), "Inclui Bar");
  this.setState(previousState => {
    return { updateFilter: !previousState.updateFilter };
  });
  this.props.setVenueFilter(filters);
}

পিএস: ফাংশনটি this.props.setVenueFilter(filters)হ'ল রিডেক্স অ্যাকশন, এবং this.props.venueFiltersএটি হ'ল রিডেক্স রাজ্য।

Answer 13

ক্ষেত্রে কারও শর্ত প্রয়োগ করা প্রয়োজন

 selectedMenuUI = function(value) {
       if(value==this.state.selectedMenu){
           return {
                flexDirection: 'row',
                alignItems: 'center',
                paddingHorizontal: 20,
                paddingVertical: 10,
                backgroundColor: 'rgba(255,255,255,0.3)', 
                borderRadius: 5
           }  
       } 
       return {
            flexDirection: 'row',
            alignItems: 'center',
            paddingHorizontal: 20,
            paddingVertical: 10
       }
    }

Answer 14

আমার জন্য যা কাজ করেছে তা এখানে:

render() {
  const { styleValue } = this.props;
  const dynamicStyleUpdatedFromProps = {
    height: styleValue,
    width: styleValue,
    borderRadius: styleValue,
  }

  return (
    <View style={{ ...styles.staticStyleCreatedFromStyleSheet, ...dynamicStyleUpdatedFromProps }} />
  );
}

কোনও কারণে, এই একমাত্র উপায় ছিল যে খনিটি সঠিকভাবে আপডেট হবে।