javascript - ocultos - Ocultar/Mostrar componentes en reaccionar nativo

mostrar y ocultar texto en html

Question

Soy realmente nuevo en React Native y me pregunto cómo puedo ocultar / mostrar un componente.
Aquí está mi caso de prueba:

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

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

Tengo un componente TextInput , lo que quiero es mostrar el TouchableHighlight cuando la entrada obtiene el foco, luego ocultar el TouchableHighlight cuando el usuario presiona el botón cancelar.

No sé cómo "acceder" al componente TouchableHighlight para ocultarlo / mostrarlo dentro de mis funciones showCancel/hideCancel .
Además, ¿cómo puedo ocultar el botón desde el principio?

Answer 1

El diseño de React Native tiene el soporte de propiedad de display , similar a CSS. Valores posibles: none y flex (predeterminado). https://facebook.github.io/react-native/docs/layout-props#display

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

Answer 2

En reaccionar o reaccionar de forma nativa, el componente ocultar / mostrar o agregar / eliminar no funciona como en Android o iOS. La mayoría de nosotros cree que habría una estrategia similar como

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

Pero la forma en que reacciona el trabajo nativo es completamente diferente. La única forma de lograr este tipo de funcionalidad es incluir su componente en su DOM o eliminarlo de DOM.

Aquí, en este ejemplo, voy a establecer la visibilidad de la vista de texto en función del clic del botón.

La idea detrás de esta tarea es crear una variable de estado llamada estado que tenga el valor inicial establecido en falso cuando se produce el evento de clic del botón y luego el valor cambia. Ahora usaremos esta variable de estado durante la creación del componente.

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

lo único que se debe notar en este fragmento es renderIf que en realidad es una función que devolverá el componente que se le pasó en función del valor booleano que se le pasó.

renderIf(predicate)(element)

renderif.js

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

Answer 3

En realidad, en el desarrollo de iOS por react-native cuando uso display: ''none'' o algo como a continuación:

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

El iOS no carga nada más del componente de imagen como onLoad o etc., así que decidí usar algo como a continuación:

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

Answer 4

En su función de renderizado:

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

Entonces solo haz:

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

Answer 5

Haría algo como esto:

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

});

Answer 6

La única forma de mostrar u ocultar un componente en react native es comprobando el valor de un parámetro del estado de la aplicación como state o props . Proporcioné un ejemplo completo como a continuación:

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 7

La mayoría de las veces estoy haciendo algo como esto:

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 eres nuevo en la programación, esta línea debe ser extraña para ti:

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

Esta línea es equivalente a

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

Pero no puede escribir una condición if / else en el contenido JSX (por ejemplo, la parte return () de una función de representación), por lo que tendrá que usar esta notación.

Este pequeño truco puede ser muy útil en muchos casos y le sugiero que lo use en sus desarrollos porque puede verificar rápidamente una condición.

Saludos,

Answer 8

Muy fácil. Simplemente cambie a () => this.showCancel () como a continuación:

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

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

Answer 9

Necesitaba cambiar entre dos imágenes. Con el cambio condicional entre ellos hubo un retraso de 5 segundos sin mostrar ninguna imagen.

Estoy usando el enfoque de la respuesta amos con voto negativo. Publicar como nueva respuesta porque es difícil poner código en el comentario con el formato adecuado.

Función de procesamiento:

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

Estilos:

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

Answer 10

Puede usar mi módulo react-native-display para mostrar / ocultar componentes.

Answer 11

Si necesita que el componente permanezca cargado pero oculto, puede establecer la opacidad en 0. (necesitaba esto para la cámara de exposición, por ejemplo)

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

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

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

Answer 12

Solo estoy usando el siguiente método para ocultar o ver un botón. Espero que te ayude. solo actualizar el estado y agregar hide css es suficiente para mí

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 13

Solo usa

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

Answer 14

Tuve el mismo problema en el que me gustaría mostrar / ocultar vistas, pero realmente no quería que la interfaz de usuario saltara cuando se agregaran / eliminaran cosas o que necesariamente se ocupara de volver a renderizar.

Escribí un componente simple para tratarlo por mí. Animado por defecto, pero fácil de alternar. Lo puse en GitHub y NPM con un archivo Léame, pero todo el código está debajo.

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;

Answer 15

Una opción adicional es aplicar el posicionamiento absoluto a través del estilo , configurando el componente oculto en coordenadas fuera de la pantalla:

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

A diferencia de algunas de las sugerencias anteriores, esto ocultaría su componente de la vista, PERO también lo representará (lo mantendrá en el DOM), lo que lo hará realmente invisible .

Answer 16

en render () puede mostrar condicionalmente el JSX o devolver nulo como en:

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

Answer 17

Ocultar y mostrar vista principal del Activity Indicator de Activity Indicator

constructor(props) {
  super(props)

  this.state = {
    isHidden: false
  }  
} 

Ocultar y mostrar como sigue

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

Referencia completa

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

El botón On presiona establecer estado de la siguiente manera

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

Cuando necesitas esconderte

this.setState({isHidden: false})

Answer 18

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

declarar visible falso, por lo que, por defecto, modal / view se ocultan

ejemplo = () => {

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

}

**Llamada de función **

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