प्रतिक्रिया में छिपाएँ / घटक दिखाएँ

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

आपको इस उदाहरण की जाँच करने की आवश्यकता है: अभिक्रिया में घटकों को छिपाएँ / दिखाएँ देशी

— sumit kumar pradhan

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

इसके लिए बहुत बहुत धन्यवाद, बस एक छोटा सा बदलाव जो मुझे करने की जरूरत थी: onFocus = {() => this.showCancel ()} यह एक कॉलबैक फ़ंक्शन होने की आवश्यकता है।

— Crysfel

केवल बदलने के बाद मेरे लिए काम किया return ''करने के लिएreturn null

— k7k0

आप भी कर सकते हैं {someBoolVal && <Component />}और यह केवल तभी दिखाएगा जब बूल मूल्य सत्य है।

— नाथन हाइलैंड

यह सबसे अच्छा उत्तर है

— किरील ग्युसैटिन

मुझे नहीं पता कि यह स्वीकृत उत्तर है जो मूल वांछित कार्यक्षमता दिखाने / छिपाने को लागू नहीं करता है, लेकिन इसके बजाय जोड़ें / निकालें

— मुहम्मद Aref

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>)}यूआई में केवल "बार" जैसा कुछ करता हूं, तो ऐसा क्यों होता है । मुझे उम्मीद है कि "फू" और "बार" प्रदर्शित होंगे। इसे हल करने के लिए मुझे जो करने की आवश्यकता है, वह है{ 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

जिस तरह से कंपोनेंट छिपाने / दिखाने या जोड़ने / हटाने का काम करता है वैसा ही प्रतिक्रिया या प्रतिक्रिया में एंड्रॉइड या आईओएस में काम नहीं करता है। हममें से ज्यादातर लोग सोचते हैं कि जैसी रणनीति होगी वैसी ही होगी

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

चतुर :) थंक के लिए उपयोग का मामला क्या है?

— गोल्डलाइक्स

Haha। प्रतिभाशाली!

— जसीम अब्बास

यह समाधान उपयोग के मामलों के लिए समझ में आता है, जहां एक संवाद बॉक्स को केवल जरूरत पड़ने पर प्रस्तुत करना होता है। Ty!

— साउंडस्टेज

अगर आपको स्टेटस रखने की जरूरत नहीं है, तो एलीमेंट को हटा दें। इसलिए हर बार जब आप फिर से प्रस्तुत करते हैं, जैसे आप फिर से घटक बनाते हैं।

— डैनियल जोस पडिला पेना

आपको इस उदाहरण की जाँच करने की आवश्यकता है: अभिक्रिया में घटकों को छिपाएँ / दिखाएँ देशी

— sumit kumar pradhan

Answer 4

रेंडर में () आप सशर्त रूप से JSX दिखा सकते हैं या निम्न रूप में रिक्त कर सकते हैं:

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

Comments

कोष्ठक 2 में आवश्यक होना चाहिए।

— jiexishede

सबसे सरल समाधान के लिए धन्यवाद

— सैम १४

Answer 5

मुझे दो छवियों के बीच स्विच करने की आवश्यकता थी। उनके बीच सशर्त स्विचिंग के साथ 5sec देरी थी जिसमें कोई छवि प्रदर्शित नहीं थी।

मैं डाउनवोट एमोस जवाब से दृष्टिकोण का उपयोग कर रहा हूं। नए उत्तर के रूप में पोस्ट करना क्योंकि उचित स्वरूपण के साथ टिप्पणी में कोड डालना कठिन है।

रेंडर समारोह:

<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

यह घटकों को स्मृति में रखता है, जो बड़े घटकों के साथ एक समस्या हो सकती है। ऊपर दिए गए महान उदाहरणों का उपयोग क्यों नहीं करते? वे सही तस्वीर डालेंगे और दूसरे को पूरी तरह से हटा देंगे ...

— रूप

जब आप एनिमेटेड स्पिनर बनाने की कोशिश करते हैं तो उनमें से कोई भी उदाहरण ठीक से काम नहीं करता है। जैसा कि मैंने पहले ही एंड्रॉइड पर अपने जवाब में उल्लेख किया है कि ऐनिमल जिफ के लिए आईएनजी स्विच करने की कोशिश कर रहा है, 5 पी देरी का कारण होगा जब कोई पीएनजी और न ही जीआईएफ दिखाया जाता है। मेरा मानना ​​है कि देरी मेमोरी में जीआईएफ लोड करने के कारण होती है, जिसमें कुछ समय लग सकता है। हालांकि iOS यहां बेहतर काम करता है। यदि आप मुझ पर विश्वास नहीं करते हैं, तो इसे स्वयं आज़माएँ।

— mauron85

बेशक, जैसा कि बताया गया है कि यह हर घटक के लिए इष्टतम समाधान नहीं है। लेकिन स्पिनर को लोड करने के लिए IMHO यह ठीक है। जब उपयोगकर्ता किसी अन्य पेज पर संक्रमण करता है तो यह अंततः अनलोड किया जाएगा।

— मौरोन85

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;
}

लेकिन आप JSX कंटेंट में एक if / else कंडीशन नहीं लिख सकते (उदाहरण के लिए रेंडर फंक्शन का हिस्सा) तो आपको इस नोटेशन का उपयोग करना होगा।

यह छोटी सी चाल कई मामलों में बहुत उपयोगी हो सकती है और मैं आपको अपने विकास में इसका उपयोग करने का सुझाव देता हूं क्योंकि आप किसी स्थिति को जल्दी से देख सकते हैं।

सादर,

Comments

आप आप कैसे परिभाषित पर विस्तृत कृपया <ToHideAndShowComponent />

— Ritveak

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

रिएक्ट नेटिव के लेआउट में displayसीएसएस के समान संपत्ति का समर्थन है। संभावित मान: 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}} के साथ दृश्य के साथ आप जो भी घटक छिपाने की कोशिश कर रहे हैं, उसे आप लपेट सकते हैं।

— जोश बेकर

आप तत्व को मूल चौड़ाई और ऊँचाई पर कैसे पुनर्स्थापित करते हैं?

— कुछ जुआन

समझ में नहीं आता है कि यह क्यों घट गया है, लेकिन कई मामलों में यह अच्छी सलाह है। मुझे एनिमेटेड और गैर-एनिमेटेड gif के बीच स्विच करने की आवश्यकता है। सशर्त स्विचिंग img स्क्रीन पर कोई img के साथ देरी का कारण बना। फिक्स के हिस्से के रूप में, मैं दोनों img प्रदर्शित कर रहा हूं, लेकिन जिसे छिपाया जाना चाहिए, उसकी शून्य चौड़ाई और ऊंचाई है।

— मउरोन85

यह घटक को स्मृति में रखता है, जो बड़े घटकों के साथ समस्या हो सकती है। ऊपर दिए गए महान उदाहरणों का उपयोग क्यों नहीं करते? वे पूरी तरह से घटक सम्मिलित करते हैं और हटाते हैं ...

— एएस

Answer 10

मेरे पास एक ही मुद्दा था जहां मैं दृश्यों को दिखाना / छिपाना चाहता हूं, लेकिन मैं वास्तव में नहीं चाहता था कि जब चीजें जोड़ी / हटा दी जाए या फिर से रेंडरिंग से निपटने के लिए जरूरी हो तो UI चारों ओर कूद जाए।

मेरे लिए इससे निपटने के लिए मैंने एक सरल घटक लिखा। डिफ़ॉल्ट रूप से एनिमेटेड, लेकिन टॉगल करना आसान है। मैंने इसे रीडहेम के साथ गिटहब और एनपीएम पर रखा , लेकिन सभी कोड नीचे हैं।

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

एक अच्छा, बस मैं क्या देख रहा था :)

— Adamski

यह सबसे अच्छा काम करता है, और एक उचित दृश्य की तरह व्यवहार करता है जब आप अन्य घटकों को डालते हैं जो दृश्य के अंदर एक जीवनचक्र होता है (जो काम नहीं करता है visible && (...)।

— dB।

Answer 11

एक अतिरिक्त विकल्प स्टाइल के माध्यम से पूर्ण स्थिति को लागू करना है, छिपे हुए घटक को आउट-ऑफ-स्क्रीन निर्देशांक में सेट करना है:

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

पिछले कुछ सुझावों के विपरीत, यह आपके घटक को दृश्य से छिपा देगा लेकिन BUT इसे रेंडर भी करेगा (इसे DOM में रखें), इस प्रकार यह वास्तव में अदृश्य हो जाएगा ।

Comments

यह विचार मेरे लिए उपयुक्त है, धन्यवाद। अगर किसी को ज़रूरत है, तो इसे भी देखें: gist.github.com/jaysoo/cbb81a07cc22015a72e9

— Chaki_Black

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

हालांकि यह कोड ओपी के मुद्दे को हल कर सकता है, लेकिन स्पष्टीकरण को शामिल करना सबसे अच्छा है कि आपका कोड ओपी के मुद्दे को कैसे संबोधित करता है। इस तरह, भविष्य के आगंतुक आपके पोस्ट से सीख सकते हैं, और इसे अपने स्वयं के कोड पर लागू कर सकते हैं। SO एक कोडिंग सेवा नहीं है, बल्कि ज्ञान के लिए एक संसाधन है। इसके अलावा, उच्च गुणवत्ता, पूर्ण उत्तरों के अपग्रेड होने की अधिक संभावना है। ये विशेषताएं, इस आवश्यकता के साथ कि सभी पद स्व-सम्‍मिलित हैं, एसओ की कुछ ताकतें एक मंच के रूप में हैं, जो इसे मंचों से अलग करती हैं। आप अतिरिक्त जानकारी जोड़ने और / या स्रोत प्रलेखन के साथ अपने स्पष्टीकरण के पूरक के लिए संपादित कर सकते हैं।

— ysf

अपडेट किया गया, थोड़ा और समझाया गया। आशा करता हूँ की ये काम करेगा!

— ओएबोला

Answer 17

बहुत आसान। बस नीचे (जैसे) => this.showCancel () में परिवर्तन करें:

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

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

Comments

आपको इस उदाहरण की जाँच करने की आवश्यकता है: अभिक्रिया में घटकों को छिपाएँ / दिखाएँ देशी

— sumit kumar pradhan

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
  }
});

IOS छवि घटक 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कि घटक की शैली में सीएसएस की सेटिंग 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>
 }

);
}

बस इतना ही। अपनी कोडिंग का आनंद लें ...