Komponenten in reaktiver Natur ausblenden/anzeigen

In Ihrer Renderfunktion:

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

Dann machen Sie einfach:

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

In reaktiver oder reaktiver Weise funktioniert das Verbergen/Anzeigen oder Hinzufügen/Entfernen von Komponenten nicht wie in Android oder iOS. Die meisten von uns glauben, dass es eine ähnliche Strategie geben würde

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

Aber die Art und Weise, auf die einheimische Arbeit reagiert, ist völlig anders. Die einzige Möglichkeit, diese Art von Funktionalität zu erreichen, besteht darin, Ihre Komponente in Ihr DOM aufzunehmen oder aus dem DOM zu entfernen.

In diesem Beispiel werde ich die Sichtbarkeit der Textansicht basierend auf dem Klicken der Schaltfläche festlegen. 

Die Idee hinter dieser Aufgabe ist das Erstellen einer Statusvariablen mit dem Namen state, deren Anfangswert auf false gesetzt ist, wenn das Schaltflächenklickereignis auftritt, und der Wert wechselt. Jetzt verwenden wir diese Zustandsvariable beim Erstellen der Komponente.

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

das einzige, was in diesem Snippet zu beachten ist, ist renderIf, eine Funktion, die die übergebene Komponente auf der Grundlage des an sie übergebenen booleschen Werts zurückgibt. 

renderIf(predicate)(element)

renderif.js

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

in render () können Sie den JSX bedingt anzeigen oder null zurückgeben wie in:

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

Meistens mache ich so etwas:

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

Wenn Sie ein bisschen neu in der Programmierung sind, muss Ihnen diese Zeile fremd sein:

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

Diese Zeile entspricht

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

Sie können jedoch keine if/else-Bedingung in JSX-Inhalt schreiben (z. B. den return () - Teil einer Renderfunktion). Sie müssen diese Notation verwenden.

Dieser kleine Trick kann in vielen Fällen sehr nützlich sein, und ich empfehle Ihnen, ihn in Ihren Entwicklungen zu verwenden, da Sie eine Bedingung schnell überprüfen können.

Grüße,

Ich musste zwischen zwei Bildern wechseln. Beim bedingten Umschalten zwischen ihnen gab es eine Verzögerung von 5 Sekunden, ohne dass ein Bild angezeigt wurde.

Ich verwende den Ansatz aus der amos Antwort amos. Posting als neue Antwort, da es schwierig ist, Code mit der richtigen Formatierung in Kommentar zu bringen.

Renderfunktion:

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

Styles:

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

Hide und Show übergeordnete Ansicht von Activity Indicator 

constructor(props) {
  super(props)

  this.state = {
    isHidden: false
  }  
} 

Hide und Show as Follow

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

Vollständige Referenz

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

Bei Tastendruck wird der Status wie folgt eingestellt

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

Wenn du dich verstecken musst 

this.setState({isHidden: false})

benutz einfach

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

Eine weitere Option ist das Anwenden von der absoluten Positionierung über das Styling , wobei die verborgene Komponente in Koordinaten außerhalb des Bildschirms gesetzt wird:

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

Anders als in einigen der vorherigen Vorschläge, würde dies Ihre Komponente aus der Ansicht verbergen, wird sie aber auch wiedergegeben (im DOM belassen), wodurch sie wirklich unsichtbar wird.

Ich hatte das gleiche Problem, wo ich Views anzeigen/ausblenden wollte, aber ich wollte wirklich nicht, dass die Benutzeroberfläche herumsprang, wenn Dinge hinzugefügt oder entfernt wurden oder dass notwendigerweise mit dem Rendern umgegangen wurde. 

Ich habe eine einfache Komponente geschrieben, die mich damit beschäftigt. Standardmäßig animiert, aber leicht umschaltbar. Ich habe es auf GitHub und NPM mit einer Readme-Datei angelegt, aber der gesamte Code ist unten.

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;

Das Layout von React Native unterstützt die Eigenschaft display, ähnlich wie CSS. Mögliche Werte: none und flex (Standard) . https://facebook.github.io/react-native/docs/layout-props#display

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

Sie können mein Modul React-native-Display verwenden, um Komponenten anzuzeigen/auszublenden.

Die einzige Möglichkeit, eine Komponente in Reactive Native ein- oder auszublenden, besteht darin, den Wert eines Parameters des Anwendungsstatus wie state oder props zu überprüfen. Ich lieferte ein vollständiges Beispiel wie folgt:

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;

Wenn die Komponente geladen bleiben soll, aber versteckt, können Sie die Deckkraft auf 0 setzen. 

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

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

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

Sehr leicht. Ändern Sie einfach zu () => this.showCancel () wie folgt: 

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

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

ich verwende nur die unten stehende Methode, um eine Schaltfläche auszublenden oder anzuzeigen. hoffe es wird dir helfen. Für mich reicht es aus, nur den status zu aktualisieren und hide css hinzuzufügen

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

Eigentlich in der iOS-Entwicklung von react-native, wenn ich display: 'none' oder etwas wie das Folgende benutze:

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

Das iOS lädt keine anderen Komponenten der Image-Komponente wie onLoad oder etc. Daher entschied ich mich für Folgendes:

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