Cacher/Montrer les composants de réagir natif

Je voudrais faire quelque chose comme ceci:

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

});

De réagir ou de réagir natif de la façon dont la composante masquer/afficher ou ajouter/supprimer ne fonctionne pas comme sur android ou iOS. La plupart d'entre nous pense qu'il y aurait la stratégie similaire comme

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

Mais la manière de réagir natif de travail est complètement différent. La seule façon d'obtenir ce type de fonctionnalité est d'inclure votre composant dans votre DOM ou retirer de DOM.

Ici dans cet exemple, je vais définir la visibilité de l'affichage du texte basé sur le bouton cliquez sur.

L'idée derrière cette tâche est de créer une variable d'état appelé état ayant la valeur initiale définie à false lorsque l'événement click du bouton en est-il alors de la valeur de 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 renderIf qui est en fait une fonction qui renvoie le composant est passé basé sur la valeur booléenne est passé.

renderIf(predicate)(element)

renderif.js

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

J'avais besoin de basculer entre les deux images. Avec conditionnelle de commutation entre eux, il y a 5 secondes de retard avec aucune image affichée.

Je suis en utilisant une approche de downvoted amos réponse. Poste en tant que nouvel élément de réponse car il est difficile de mettre le code en commentaire avec une mise en forme appropriée.

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

Styles:

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

Cacher Et Montrer parent vue de Activity Indicator

constructor(props) {
  super(props)

  this.state = {
    isHidden: false
  }  
} 

Cacher et Montrer 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>
   );
}

Sur le Bouton presss état fixée comme suit

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

Lorsque vous avez besoin de cacher

this.setState({isHidden: false})

J'ai eu le même problème lorsque je veux afficher /masquer les points de Vue, mais je n'ai vraiment pas envie de l'INTERFACE utilisateur de sauter partout quand les choses ont été ajoutées/supprimées ou nécessairement à traiter avec la ré-rendu.

J'ai écrit un Composant simple de traiter avec elle pour moi. Animés 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;

Réagir Natif de la mise en page a l' display support de la propriété, semblables aux feuilles de style CSS.
Valeurs possibles: none et flex (par défaut).
https://facebook.github.io/react-native/docs/layout-props#display

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

Si vous avez besoin de la composante de rester chargé, mais masquée, vous pouvez définir l'opacité à 0. (J'avais besoin de cela pour l'expo de la caméra par exemple)

//in constructor    
this.state = {opacity: 100}
/in component
style = {{opacity: this.state.opacity}}
//when you want to hide
this.setState({opacity: 0})

je suis juste en utilisant la méthode ci-dessous pour masquer ou afficher un bouton. espérons qu'il saura vous aider. juste statut de mise à jour et l'ajout de cacher css est assez pour moi

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