Masquer / afficher les composants dans React Native

Je suis vraiment nouveau sur React Native et je me demande comment puis-je masquer / afficher un composant.
Voici mon cas de test:

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

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

J'ai un TextInputcomposant, ce que je veux, c'est afficher le TouchableHighlightmoment où l'entrée obtient le focus, puis le masquer TouchableHighlightlorsque l'utilisateur appuie sur le bouton d'annulation.

Je ne sais pas comment "accéder" au TouchableHighlightcomposant pour le cacher / le montrer dans mes fonctions showCancel/hideCancel.
Aussi, comment puis-je masquer le bouton dès le début?

Je ferais quelque chose comme ça:

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

});

Dans votre fonction de rendu:

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

Alors faites simplement:

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

En réaction ou en réaction native, la façon dont le composant cacher / afficher ou ajouter / supprimer ne fonctionne pas comme dans Android ou iOS. La plupart d'entre nous pensent qu'il y aurait une stratégie similaire comme

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

Mais la façon dont réagissent le travail natif est complètement différente. Le seul moyen d'obtenir ce type de fonctionnalité est d'inclure votre composant dans votre DOM ou de le supprimer du DOM.

Ici, dans cet exemple, je vais définir la visibilité de la vue du texte en fonction du clic sur le bouton.

L'idée derrière cette tâche est de créer une variable d'état appelée état dont la valeur initiale est définie sur false lorsque l'événement de clic sur le bouton se produit, puis sa valeur bascule. Nous allons maintenant utiliser cette variable d'état lors de la création du composant.

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

la seule chose à remarquer dans cet extrait de code est de savoir renderIfqui est en fait une fonction qui retournera le composant qui lui est passé en fonction de la valeur booléenne qui lui est passée.

renderIf(predicate)(element)

renderif.js

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

dans render (), vous pouvez afficher conditionnellement le JSX ou retourner null comme dans:

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

J'avais besoin de basculer entre deux images. Avec la commutation conditionnelle entre eux, il y avait un délai de 5 secondes sans image affichée.

J'utilise l'approche de la réponse amos votée à la baisse. Publier comme nouvelle réponse car il est difficile de mettre du code en commentaire avec un formatage approprié.

Fonction de rendu:

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

Modes:

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

La plupart du temps, je fais quelque chose comme ceci:

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

Si vous êtes un peu novice en programmation, cette ligne doit vous être étrange:

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

Cette ligne équivaut à

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

Mais vous ne pouvez pas écrire une condition if / else dans le contenu JSX (par exemple la partie return () d'une fonction de rendu), vous devrez donc utiliser cette notation.

Cette petite astuce peut être très utile dans de nombreux cas et je vous suggère de l'utiliser dans vos développements car vous pouvez vérifier rapidement une condition.

Cordialement,

Masquer et afficher la vue parent deActivity Indicator

constructor(props) {
  super(props)

  this.state = {
    isHidden: false
  }  
} 

Masquer et afficher comme suit

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

Référence complète

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

Les pressions sur le bouton définissent l'état comme suit

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

Quand tu as besoin de te cacher

this.setState({isHidden: false})

La mise en page de React Native prend en charge la displaypropriété, similaire à CSS. Valeurs possibles: noneet flex(par défaut). https://facebook.github.io/react-native/docs/layout-props#display

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

juste utiliser

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

J'ai eu le même problème où je voudrais afficher / masquer les vues, mais je ne voulais vraiment pas que l'interface utilisateur saute lorsque des éléments ont été ajoutés / supprimés ou nécessairement pour traiter le re-rendu.

J'ai écrit un composant simple pour m'en occuper pour moi. Animé par défaut, mais facile à basculer. Je l'ai mis sur GitHub et NPM avec un readme, mais tout le code est ci-dessous.

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;

Une option supplémentaire consiste à appliquer un positionnement absolu via le style , en définissant le composant masqué en coordonnées hors écran:

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

Contrairement à certaines des suggestions précédentes, cela masquerait votre composant de la vue MAIS le rendra également (le conservera dans le DOM), le rendant ainsi vraiment invisible .

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

déclarer visible false donc par défaut modal / view sont hide

exemple = () => {

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

}

** Appel de fonction **

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

Si vous avez besoin que le composant reste chargé mais masqué, vous pouvez définir l'opacité sur 0. (J'en avais besoin pour la caméra expo par exemple)

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

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

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

Vous pouvez utiliser mon module react-native-display pour afficher / masquer les composants.

L'exemple suivant est le codage en typographie avec Hooks.

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

}

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

Très facile. Changez simplement en () => this.showCancel () comme ci-dessous:

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

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

J'utilise juste la méthode ci-dessous pour masquer ou afficher un bouton. j'espère que cela vous aidera. il me suffit de mettre à jour le statut et d'ajouter hide css

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

En fait, dans le développement iOS react-nativelorsque j'utilise display: 'none'ou quelque chose comme ci-dessous:

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

L'iOS ne charge rien d'autre du composant Image comme onLoadou etc., j'ai donc décidé d'utiliser quelque chose comme ci-dessous:

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

La seule façon d'afficher ou de masquer un composant dans react native est de vérifier la valeur d'un paramètre d'état d'application comme stateou props. J'ai fourni un exemple complet comme ci-dessous:

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;

Si vous souhaitez le masquer tout en gardant l'espace occupé par le composant comme le visibility: hiddenparamètre css dans le style du composantopacity: 0 devrait faire l'affaire.

En fonction du composant, d'autres étapes de désactivation de la fonctionnalité peuvent être nécessaires car une interaction avec un élément invisible est possible.

Vous pouvez utiliser les conditions pour afficher et masquer les composants

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

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

);
}

c'est tout. profitez de votre codage ...