স্থানীয় প্রতিক্রিয়া দেখিয়ে উপাদানগুলি লুকান / দেখান

Question

আমি নেটিভ রিএ্যাক্টে সত্যিই নতুন এবং আমি ভাবছি কীভাবে আমি কোনও উপাদান গোপন / প্রদর্শন করতে পারি।
এখানে আমার পরীক্ষার কেস:

<TextInput
    onFocus={this.showCancel()}
    onChangeText={(text) => this.doSearch({input: text})} />

<TouchableHighlight 
    onPress={this.hideCancel()}>
    <View>
        <Text style={styles.cancelButtonText}>Cancel</Text>
    </View>
</TouchableHighlight>

আমার একটি TextInputউপাদান রয়েছে, আমি যা চাই তা হ'ল TouchableHighlightইনপুটটি যখন ফোকাস পায় তখন তা দেখাতে হবে , তারপরে TouchableHighlightব্যবহারকারী যখন বাতিল বোতামটি টিপেন তখন তা লুকান ।

আমি জানি না কীভাবে TouchableHighlightআমার ক্রিয়াকলাপগুলির মধ্যে এটি লুকিয়ে / দেখানোর জন্য উপাদানটিকে "অ্যাক্সেস" করতে হবে showCancel/hideCancel।
এছাড়াও, আমি কীভাবে প্রথম থেকেই বোতামটি আড়াল করতে পারি?

Comments

আপনার এই উদাহরণটি পরীক্ষা করে দেখতে হবে: প্রতিক্রিয়া

— নেটিভে

Answer 1

আমি এই জাতীয় কিছু করব:

var myComponent = React.createComponent({

    getInitialState: function () {
        return {
            showCancel: false,
        };
    },

    toggleCancel: function () {
        this.setState({
            showCancel: !this.state.showCancel
        });
    }

    _renderCancel: function () {
        if (this.state.showCancel) {
            return (
                <TouchableHighlight 
                    onPress={this.toggleCancel()}>
                    <View>
                        <Text style={styles.cancelButtonText}>Cancel</Text>
                    </View>
                </TouchableHighlight>
            );
        } else {
            return null;
        }
    },

    render: function () {
        return (
            <TextInput
                onFocus={this.toggleCancel()}
                onChangeText={(text) => this.doSearch({input: text})} />
            {this._renderCancel()}          
        );
    }

});

Comments

এর জন্য আপনাকে অনেক ধন্যবাদ, আমার একটি ছোট্ট পরিবর্তন করার দরকার ছিল: অনফোকাস = {() => this.showCancel ()} এটি একটি কলব্যাক ফাংশন হওয়া দরকার।

— ক্রাইসফেল 21

শুধু পরিবর্তন করার পর আমার জন্য কাজ return ''করতেreturn null

— k7k0

আপনি এটি করতেও পারেন {someBoolVal && <Component />}এবং এটি কেবলমাত্র বুল মানটি সত্য হলে তা প্রদর্শিত হবে।

— নাথান হাইল্যান্ড

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

— কিরিল গুসায়াতিন

আমি জানি না এটি গৃহীত উত্তর যা মূল পছন্দসই কার্যকারিতা প্রদর্শন / লুকানো বাস্তবায়ন করে না, পরিবর্তে যুক্ত / সরান

— মুহাম্মদ আরেফ

Answer 2

আপনার রেন্ডার ফাংশনে:

{ this.state.showTheThing && 
  <TextInput/>
}

তারপরে কেবল করুন:

this.setState({showTheThing: true})  // to show it  
this.setState({showTheThing: false}) // to hide it

Comments

এটি আমার পক্ষে কাজ করেছে। তবে আমি নিশ্চিত না কেন আমি যখন { this.state.showTheThing && (<Text>foo</Text> && <Text>bar</Text>)}কেবল "বার" এর মতো কিছু করি তা ইউআইতে দেখানো হয় কেন। আমি "foo" এবং "বার" প্রদর্শিত হবে আশা করি। এটি সমাধান করার জন্য আমার যা করা দরকার তা কল করতে হবে{ this.state.showTheThing && (<Text>foo</Text>} { this.state.showTheThing && (<Text>bar</Text>}

— টোনতিউহ্নব

সম্ভবত এই কাজ করে? কারণ যৌক্তিক &&উপাদানগুলিকে একত্রিত করে না{ this.state.showTheThing && (<View><Text>foo</Text><Text>bar</Text></View>)}

— muescha

এটি আমার পক্ষে কাজ করেছিল, যখন কোনও ব্যবহারকারী তাদের প্রোফাইল পিকচারটি আপলোড করেন আমি একটি "নেক্সট স্টেপ" বোতামটি প্রদর্শন করতে চেয়েছিলাম। সুতরাং আমার কোডটি ছিল:{this.state.hasPic && <Button title="Go to next step" onPress={this._nextStep} />}

— ড্যাগি ব্ল্যাঙ্কএক্স - ডগলাস মাওয়ঙ্গি

একাধিক উপাদান দেখানোর জন্য যে কেউ লড়াই করছেন, তার জন্য আপনার উপাদানটিকে একটি খণ্ড দিয়ে মুড়িয়ে দিন। যেমন। <React.Fragment><Text>Foo</Text><Text>Bar></Text></React.Fragment>

— বেন কুল

Answer 3

দেশীয় প্রতিক্রিয়া বা প্রতিক্রিয়া দেখায় যেভাবে উপাদানটি আড়াল / প্রদর্শন বা যোগ করা / অপসারণ করা হয় তা অ্যান্ড্রয়েড বা আইওএসের মতো কাজ করে না। আমাদের বেশিরভাগের মতই অনুরূপ কৌশল থাকবে would

View.hide = true or parentView.addSubView(childView)

কিন্তু দেশীয় কাজের প্রতিক্রিয়া জানানোর উপায় সম্পূর্ণ আলাদা। এই ধরণের কার্যকারিতা অর্জনের একমাত্র উপায় হ'ল আপনার ডিওমে আপনার উপাদান অন্তর্ভুক্ত করা বা ডিওএম থেকে অপসারণ।

এখানে এই উদাহরণে আমি বোতাম ক্লিকের উপর ভিত্তি করে পাঠ্য দৃশ্যের দৃশ্যমানতা সেট করতে যাচ্ছি।

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

import renderIf from './renderIf'

class FetchSample extends Component {
  constructor(){
    super();
    this.state ={
      status:false
    }
  }

  toggleStatus(){
    this.setState({
      status:!this.state.status
    });
    console.log('toggle button handler: '+ this.state.status);
  }

  render() {
    return (
      <View style={styles.container}>
        {renderIf(this.state.status)(
          <Text style={styles.welcome}>
            I am dynamic text View
          </Text>
        )}

        <TouchableHighlight onPress={()=>this.toggleStatus()}>
          <Text>
            touchme
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

এই স্নিপেটে কেবলমাত্র একটি জিনিস লক্ষ্য করা যায় renderIfযা এটি আসলে একটি ফাংশন যা এতে উত্পন্ন উপাদানটিকে এটির কাছে দেওয়া বুলিয়ান মানের উপর ভিত্তি করে ফিরিয়ে দেবে।

renderIf(predicate)(element)

renderif.js

'use strict';
const isFunction = input => typeof input === 'function';
export default predicate => elemOrThunk =>
  predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;

Comments

চতুর :) থাঙ্কের জন্য ইউজ কেস কী?

— গোল্ডলাক্স

হা হা। উজ্জ্বল!

— জাসিম আব্বাস

এই সমাধানটি ব্যবহারের ক্ষেত্রে সার্থক করে তোলে যেখানে প্রয়োজনবোধে কেবল একটি ডায়ালগ বাক্স রেন্ডার করা দরকার। Ty!

— সাউন্ডস্পটেজ

আপনার স্থিতি বজায় রাখার প্রয়োজন হলে, উপাদানটি তার রাজ্যের পুনরায় সেট করুন সরান This সুতরাং প্রতিবার আপনি যখন পুনরায় রেন্ডার করেন তখন আপনি আবার উপাদান তৈরি করার মতো।

— ড্যানিয়েল জোস প্যাডিলা পেঁয়া

আপনার এই উদাহরণটি পরীক্ষা করে দেখতে হবে: প্রতিক্রিয়া

— নেটিভে

Answer 4

রেন্ডারে () আপনি শর্তাধীন জেএসএক্স প্রদর্শন করতে পারেন বা হিসাবে নাল ফিরে আসতে পারেন:

render(){
    return({yourCondition ? <yourComponent /> : null});
}

Comments

প্যারেন্টিহিসগুলি লাইন ২ এ আবশ্যক

— jiexishede

সহজ সমাধানের জন্য আপনাকে ধন্যবাদ

— স্যাম

Answer 5

আমার দুটি চিত্রের মধ্যে স্যুইচ করা দরকার। তাদের মধ্যে শর্তসাপেক্ষে স্যুইচিংয়ের সাথে কোনও চিত্র প্রদর্শিত না করে 5 সেকেন্ড বিলম্ব হয়েছিল।

আমি ডাউনভোট আমোস উত্তর থেকে পদ্ধতির ব্যবহার করছি। নতুন উত্তর হিসাবে পোস্ট করা কারণ সঠিক ফর্ম্যাটিং সহ মন্তব্যে কোড রাখা শক্ত।

রেন্ডার ফাংশন:

<View style={styles.logoWrapper}>
  <Image
    style={[styles.logo, loading ? styles.hidden : {}]}
    source={require('./logo.png')} />
  <Image
    style={[styles.logo, loading ? {} : styles.hidden]}
    source={require('./logo_spin.gif')} />
</View>

শৈলী:

var styles = StyleSheet.create({
  logo: {
    width: 200,
    height: 200,
  },
  hidden: {
    width: 0,
    height: 0,
  },
});

Comments

এটি উপাদানগুলিকে স্মৃতিতে রাখে যা বড় উপাদানগুলির সাথে সমস্যা হতে পারে। উপরের দুর্দান্ত উদাহরণগুলি ব্যবহার করবেন না কেন? তারা সঠিক ছবি sertোকাবে এবং অন্যটিকে সম্পূর্ণ সরিয়ে ফেলবে ...

— এএস

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

— mauron85

অবশ্যই নির্দেশিত হিসাবে এটি প্রতিটি উপাদান জন্য অনুকূল সমাধান নয়। তবে স্পিনার লোড করার জন্য আইএমএইচও এটি ঠিক আছে। ব্যবহারকারী অন্য পৃষ্ঠায় স্থানান্তরিত হলে এটি অবশেষে লোড করা হবে।

— mauron85

Answer 6

বেশিরভাগ সময় আমি এই জাতীয় কিছু করে থাকি:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isHidden: false};
    this.onPress = this.onPress.bind(this);
  }
  onPress() {
    this.setState({isHidden: !this.state.isHidden})
  }
  render() {
    return (
      <View style={styles.myStyle}>

        {this.state.isHidden ? <ToHideAndShowComponent/> : null}

        <Button title={this.state.isHidden ? "SHOW" : "HIDE"} onPress={this.onPress} />
      </View>
    );
  }
}

আপনি যদি প্রোগ্রামিংয়ে একরকম নতুন হন তবে এই লাইনটি আপনার কাছে অবশ্যই অদ্ভুত হবে:

{this.state.isHidden ? <ToHideAndShowComponent/> : null}

এই লাইন সমান

if (this.state.isHidden)
{
  return ( <ToHideAndShowComponent/> );
}
else
{
  return null;
}

তবে আপনি জেএসএক্স বিষয়বস্তুতে (যদি উদাহরণস্বরূপ কোনও রেন্ডার ফাংশনের রিটার্ন () অংশ) একটি / অন্য শর্ত লিখতে পারবেন না যাতে আপনাকে এই স্বরলিপিটি ব্যবহার করতে হবে।

এই ছোট কৌশলটি অনেক ক্ষেত্রে খুব কার্যকর হতে পারে এবং আমি আপনাকে এটি আপনার বিকাশে ব্যবহার করার পরামর্শ দিচ্ছি কারণ আপনি দ্রুত একটি শর্ত পরীক্ষা করতে পারেন।

শুভেচ্ছা সহ,

Comments

আপনি কীভাবে <টুহাইডএন্ডশো কম্পোনেন্ট />

— itত্বভেক

Answer 7

এর প্যারেন্ট ভিউ লুকান এবং দেখানActivity Indicator

constructor(props) {
  super(props)

  this.state = {
    isHidden: false
  }  
} 

লুকান এবং অনুসরণ হিসাবে প্রদর্শন করুন

{
   this.state.isHidden ?  <View style={style.activityContainer} hide={false}><ActivityIndicator size="small" color="#00ff00" animating={true}/></View> : null
}

সম্পূর্ণ রেফারেন্স

render() {
    return (
       <View style={style.mainViewStyle}>
          <View style={style.signinStyle}>
           <TextField placeholder='First Name' keyboardType='default' onChangeFirstName={(text) => this.setState({firstName: text.text})}/>
           <TextField placeholder='Last Name' keyboardType='default' onChangeFirstName={(text) => this.setState({lastName: text.text})}/>
           <TextField placeholder='Email' keyboardType='email-address' onChangeFirstName={(text) => this.setState({email: text.text})}/>
           <TextField placeholder='Phone Number' keyboardType='phone-pad' onChangeFirstName={(text) => this.setState({phone: text.text})}/>
           <TextField placeholder='Password' secureTextEntry={true} keyboardType='default' onChangeFirstName={(text) => this.setState({password: text.text})}/>
           <Button  style={AppStyleSheet.buttonStyle} title='Sign up' onPress={() => this.onSignupPress()} color='red' backgroundColor='black'/>
          </View>
          {
            this.state.isHidden ?  <View style={style.activityContainer}><ActivityIndicator size="small" color="#00ff00" animating={true}/></View> : null
          }
      </View>
   );
}

বাটন প্রেসগুলিতে নিম্নলিখিত হিসাবে রাষ্ট্র সেট করুন

onSignupPress() {
  this.setState({isHidden: true})
}

আপনার যখন লুকানো দরকার

this.setState({isHidden: false})

Answer 8

প্রতিক্রিয়া নেটিভের লেআউটটিতে displayCSS এর মতো সম্পত্তি সমর্থন রয়েছে। সম্ভাব্য মান: noneএবং flex(ডিফল্ট)। https://facebook.github.io/react-native/docs/layout-props#display

<View style={{display: 'none'}}> </View>

Comments

position: absoluteএটির সাথে এটি ব্যবহার না করার ক্ষেত্রে যত্নশীল , এটি আসলে এটি আড়াল করে না! 0.54 - 0.59 (কমপক্ষে) থেকে জানা বাগ: github.com/facebook/react-native/issues/18415

— জোশুয়া পিন্টার

Answer 9

শুধু ব্যবহার

style={ width:0, height:0 } // to hide

Comments

আপনি উত্তরে কিছু প্রসঙ্গ / বিশদ যুক্ত করলে এটি সহায়ক হবে।

— উদিতস

ধরে নিচ্ছি আপনার কাছে কোন উপাদানটি আড়াল করবেন তা সিদ্ধান্ত নেওয়ার কোনও ব্যবস্থা আছে, এই উত্তরটি বেশ কার্যকর। আপনি স্টাইল = {{প্রস্থ: 0, উচ্চতা: 0} with দিয়ে একটি ভিউ দিয়ে যে কোনও উপাদানকে আড়াল করতে চেষ্টা করছেন তা মোড়ানো করতে পারেন}

— জোশ বাকের

আপনি কীভাবে উপাদানটিকে মূল প্রস্থ এবং উচ্চতায় পুনরুদ্ধার করবেন?

— কিছু জুয়ান

বুঝতে হবে না কেন এটি হ্রাসযুক্ত, তবে অনেক ক্ষেত্রে এটি ভাল পরামর্শ। আমার অ্যানিমেটেড এবং অ-অ্যানিমেটেড জিএফের মধ্যে স্যুইচ করা দরকার। শর্তসাপেক্ষে স্যুইচিং img স্ক্রিনে কোনও img ছাড়াই বিলম্ব ঘটায়। স্থির অংশ হিসাবে, আমি উভয়ই img প্রদর্শন করছি, তবে যাকে লুকাতে হবে তার শূন্য প্রস্থ এবং উচ্চতা রয়েছে।

— mauron85

এটি উপাদানটিকে স্মৃতিতে রাখে যা বড় উপাদানগুলির সাথে সমস্যা হতে পারে। উপরের দুর্দান্ত উদাহরণগুলি ব্যবহার করবেন না কেন? তারা উপাদানগুলি পুরোপুরি

— AS

Answer 10

আমার একই সমস্যা ছিল যেখানে আমি দেখাতে / লুকিয়ে রাখতে দেখাতে চাই, তবে জিনিসগুলি যুক্ত / সরানো বা পুনরায় রেন্ডারিংয়ের সাথে মোকাবিলা করার জন্য প্রয়োজনীয়ভাবে ইউআই ছড়িয়ে পড়তে চাইনি।

আমার পক্ষে এটি মোকাবেলা করার জন্য আমি একটি সাধারণ উপাদান লিখেছি। ডিফল্ট দ্বারা অ্যানিমেটেড, তবে টগল করা সহজ। আমি এটি একটি রিডমি দিয়ে গিটহাব এবং এনপিএম এ রেখেছি , তবে সমস্ত কোড নীচে।

npm install --save react-native-hideable-view

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

class HideableView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      opacity: new Animated.Value(this.props.visible ? 1 : 0)
    }
  }

  animate(show) {
    const duration = this.props.duration ? parseInt(this.props.duration) : 500;
    Animated.timing(
      this.state.opacity, {
        toValue: show ? 1 : 0,
        duration: !this.props.noAnimation ? duration : 0
      }
    ).start();
  }

  shouldComponentUpdate(nextProps) {
    return this.props.visible !== nextProps.visible;
  }

  componentWillUpdate(nextProps, nextState) {
    if (this.props.visible !== nextProps.visible) {
      this.animate(nextProps.visible);
    }
  }

  render() {
    if (this.props.removeWhenHidden) {
      return (this.visible && this.props.children);
    }
    return (
      <Animated.View style={{opacity: this.state.opacity}}>
        {this.props.children}
      </Animated.View>
    )
  }
}

HideableView.propTypes = {
  visible: PropTypes.bool.isRequired,
  duration: PropTypes.number,
  removeWhenHidden: PropTypes.bool,
  noAnimation: PropTypes.bool
}

export default HideableView;

Comments

খুব ভাল, আমি যা খুঁজছিলাম ঠিক

— সেটাই

এটি সর্বোত্তম কাজ, এবং একটি সঠিক দৃশ্যের মত আচরণ করবে যখন আপনি অন্যান্য উপাদান দৃশ্য ভিতরে জীবনচক্র আছে (যা সাথে কাজ করে না করা visible && (...)।

— ডেসিবেল।

Answer 11

অতিরিক্ত বিকল্পটি হ'ল স্টাইলিংয়ের মাধ্যমে নিখুঁত অবস্থান প্রয়োগ করা , স্ক্রিনের বাইরে থাকা স্থানাঙ্কগুলিতে লুকানো উপাদানটি সেট করা:

<TextInput
    onFocus={this.showCancel()}
    onChangeText={(text) => this.doSearch({input: text})}
    style={this.state.hide ? {position: 'absolute', top: -200} : {}}
/>

পূর্ববর্তী কয়েকটি পরামর্শের থেকে ভিন্ন, এটি আপনার উপাদানটিকে ভিউ থেকে আড়াল করবে তবে এটি এটি রেন্ডারও করবে (এটি ডিওমে রাখবে), সুতরাং এটি সত্যই অদৃশ্য হয়ে যায় ।

Comments

এই ধারণাটি আমার জন্য উপযুক্ত, ধন্যবাদ। কারও যদি প্রয়োজন হয় তবে এটিও দেখুন: gist.github.com/jaysoo/cbb81a07cc22015a72e9

— চাকি_ব্ল্যাক

Answer 12

constructor(props) {
    super(props);
    this.state = {
      visible: true,
}
}

ডিফল্ট মোডাল / ভিউ লুকানো হয় তাই দৃশ্যমান মিথ্যা ঘোষণা

উদাহরণ = () => {

 this.setState({ visible: !this.state.visible })

}

** ফাংশন কল **

{this.state.visible == false ?
        <View>
            <TouchableOpacity
              onPress= {() => this.example()}>   // call function
                          <Text>
                            show view
                          </Text>
            </TouchableOpacity>

</View>
:
 <View>
    <TouchableOpacity
              onPress= {() => this.example()}>
                          <Text>
                            hide view
                          </Text>
            </TouchableOpacity>
</View> 
 }

Answer 13

আপনার যদি লোড থাকা অবলম্বন করার জন্য উপাদানটির প্রয়োজন হয় তবে লুকিয়ে থাকা অবস্থায় আপনি 0 টি অপসারণকে সেট করতে পারেন (উদাহরণস্বরূপ এক্সপো ক্যামেরার জন্য আমার এটির দরকার ছিল)

//in constructor    
this.state = {opacity: 100}

/in component
style = {{opacity: this.state.opacity}}

//when you want to hide
this.setState({opacity: 0})

Answer 14

আপনি উপাদানগুলি / লুকানোর জন্য আমার মডিউলটির প্রতিক্রিয়া-স্থানীয়-প্রদর্শনটি ব্যবহার করতে পারেন ।

Answer 15

নীচের উদাহরণ হুক্স সহ টাইপস্ক্রিপ্ট কোডিং হয়।

import React, { useState, useEffect } from "react";

........

const App = () => {

   const [showScrollView, setShowScrollView] = useState(false);

   ......

   const onPress = () => {
    // toggle true or false
    setShowScrollView(!showScrollView);
  }

  ......

      </MapboxGL.ShapeSource>
        <View>{showScrollView ? (<DetailsScrollView />) : null}</View>
      </MapboxGL.MapView>
  ......

}

Answer 16

// You can use a state to control wether the component is showing or not
const [show, setShow] = useState(false); // By default won't show

// In return(
{
    show && <ComponentName />
}

/* Use this to toggle the state, this could be in a function in the 
main javascript or could be triggered by an onPress */

show == true ? setShow(false) : setShow(true)

// Example:
const triggerComponent = () => {
    show == true ? setShow(false) : setShow(true)
}

// Or
<SomeComponent onPress={() => {show == true ? setShow(false) : setShow(true)}}/>

Comments

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

— ysf

আপডেট হয়েছে, আরও কিছুটা ব্যাখ্যা করেছেন। আশা করি এটা সাহায্য করবে!

— ওয়েবোলা

Answer 17

খুব সহজ. কেবল নীচের মত () => এই.শো কনসেল () এ পরিবর্তন করুন:

<TextInput
        onFocus={() => this.showCancel() }
        onChangeText={(text) => this.doSearch({input: text})} />

<TouchableHighlight 
    onPress={this.hideCancel()}>
    <View>
        <Text style={styles.cancelButtonText}>Cancel</Text>
    </View>
</TouchableHighlight>

Comments

আপনার এই উদাহরণটি পরীক্ষা করে দেখতে হবে: প্রতিক্রিয়া

— নেটিভে

Answer 18

আমি একটি বোতামটি আড়াল করতে বা দেখতে কেবল নীচের পদ্ধতিটি ব্যবহার করছি। আশা করি এটা তোমাকে সাহায্য করবে. শুধু স্ট্যাটাস আপডেট করা এবং লুকানো সিএসএস যোগ করা আমার পক্ষে যথেষ্ট

constructor(props) {
   super(props);
      this.state = {
      visibleStatus: false
   };
}
updateStatusOfVisibility () {
   this.setStatus({
      visibleStatus: true
   });
}
hideCancel() {
   this.setStatus({visibleStatus: false});
}

render(){
   return(
    <View>
        <TextInput
            onFocus={this.showCancel()}
            onChangeText={(text) => {this.doSearch({input: text}); this.updateStatusOfVisibility()}} />

         <TouchableHighlight style={this.state.visibleStatus ? null : { display: "none" }}
             onPress={this.hideCancel()}>
            <View>
                <Text style={styles.cancelButtonText}>Cancel</Text>
            </View>
        </TouchableHighlight>
     </View>)
}

Answer 19

আসলে, আইওএস বিকাশে react-nativeযখন আমি ব্যবহার করি display: 'none'বা নীচের মতো কিছু করে:

const styles = StyleSheet.create({
  disappearImage: {
    width: 0,
    height: 0
  }
});

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

const styles = StyleSheet.create({
  disappearImage: {
    width: 1,
    height: 1,
    position: 'absolute',
    top: -9000,
    opacity: 0
  }
});

Answer 20

দেশীয় প্রতিক্রিয়াতে কোনও উপাদান দেখানোর বা আড়াল করার একমাত্র উপায় হ'ল stateবা এর মতো অ্যাপ্লিকেশন রাজ্যের কোনও প্যারামিটারের মান পরীক্ষা করা props। আমি নীচের মত একটি সম্পূর্ণ উদাহরণ প্রদান করেছি:

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

class App extends Component {

    constructor(props){
        super(props);
        this.state={
            show:false
        }
}

    showCancel=()=>{
        this.setState({show:true})
    };

    hideCancel=()=>{
        this.setState({show:false})
    };

    renderTouchableHighlight(){
        if(this.state.show){
           return(
               <TouchableHighlight
                   style={{borderColor:'black',borderWidth:1,marginTop:20}}
                   onPress={this.hideCancel}>
                   <View>
                       <Text>Cancel</Text>
                   </View>
               </TouchableHighlight>
           )
        }
        return null;
    }

    render() {


        return (
            <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                <TextInput
                    style={{borderColor:'black',borderBottomWidth:1}}
                    onFocus={this.showCancel}
                />
                {this.renderTouchableHighlight()}

            </View>
        );
    }
}

export default App;

Answer 21

আপনি যদি এটি আড়াল করতে চান visibility: hiddenতবে উপাদানটির শৈলীতে CSS এর সেটিংয়ের মতো উপাদানটি দখল করে রাখুনopacity: 0 কৌশলটি করা উচিত।

অদৃশ্য আইটেমটির সাথে মিথস্ক্রিয়া সম্ভব হওয়ায় কার্যকারিতা অক্ষম করার অন্যান্য পদক্ষেপের উপর নির্ভর করে।

Answer 22

আপনি উপাদানগুলি প্রদর্শন এবং লুকানোর জন্য শর্তাদি ব্যবহার করতে পারেন

constructor(){

    super();

    this.state ={

      isVisible:true

    }
  }

  ToggleFunction = () => {

    this.setState(state => ({

      isVisible: !state.isVisible

    }));

  };

  render() {
  
    return (

      <View style={styles.MainContainer}>

      {

        this.state.isVisible ? <Text style= {{ fontSize: 20, color: "red", textAlign: 'center' }}> Hello World! </Text> : null
      }

      <Button title="Toggle Visibility" onPress={this.ToggleFunction} />

      </View>
    );
  }

Answer 23

checkincheckout = () => {
        this.setState({ visible: !this.state.visible })
}

render() {
        return (
{this.state.visible == false ?
        <View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 50 }}>

        <View style={{ flex: 1, alignItems: 'center', flexDirection: 'column' }}>

            <TouchableOpacity onPress={() => this.checkincheckout()}>

                <Text style={{ color: 'white' }}>Click to Check in</Text>

            </TouchableOpacity>

        </View>

    </View>
:
<View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 50 }}>

<View style={{ flex: 1, alignItems: 'center', flexDirection: 'column' }}>

   <TouchableOpacity onPress={() => this.checkincheckout()}>

        <Text style={{ color: 'white' }}>Click to Check out</Text>

    </TouchableOpacity>

</View>

</View>
 }

);
}

এখানেই শেষ. আপনার কোডিং উপভোগ করুন ...