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

अधिकांश समय मैं कुछ ऐसा कर रहा हूं:

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 कंडीशन नहीं लिख सकते (उदाहरण के लिए रेंडर फंक्शन का हिस्सा) तो आपको इस नोटेशन का उपयोग करना होगा।

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

सादर,

अपने रेंडर फंक्शन में:

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

तो बस करो:

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

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

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

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

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

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;

महज प्रयोग करें

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

मुझे दो छवियों के बीच स्विच करने की आवश्यकता थी। उनके बीच सशर्त स्विचिंग के साथ 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,
  },
});

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

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

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;

मैं ऐसा कुछ करूंगा:

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

});

यदि आपको लोड किए जाने के लिए घटक की आवश्यकता है, लेकिन छिपा हुआ है तो आप अपारदर्शिता को 0. पर सेट कर सकते हैं (उदाहरण के लिए एक्सपो कैमरा के लिए मुझे इसकी आवश्यकता थी)

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

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

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

रिएक्ट नेटिव के लेआउट में सीएसएस के समान display प्रॉपर्टी सपोर्ट है। संभव मान: none और flex (डिफ़ॉल्ट)। https://facebook.github.io/react-native/docs/layout-props#display

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

वास्तव में, जब मैं display: 'none' उपयोग display: 'none' हूं तो react-native द्वारा iOS विकास में display: 'none' या नीचे जैसा कुछ:

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

IOS किसी अन्य छवि घटक जैसे कि onLoad या etc को लोड नहीं करता है, इसलिए मैंने नीचे कुछ पसंद करने का निर्णय लिया है:

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

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