reactjs - code - React Native(con Redux) animate Switch programáticamente

react native navigation

Question

Tengo el componente que tiene el componente Switch dentro. Se puede hacer clic en este componente completo. Al hacer clic en este componente, se activa el despacho (que modifica el almacenamiento de redux) y hace que este componente se vuelva a procesar. Lo que necesito es no rehacer todo el componente sino simplemente animar ese componente Switch al estado correcto.

Algo como esto

<TouchableOpacity onPress={onPress}>
    <Text>{this.props.title}</Text>
    <Switch value={this.state.active}/>
</TouchableOpacity>

¿Alguna idea?

Encuentro este caso de uso bastante común y sé que llegaré a una gran cantidad de escenarios similares, así que necesito este comportamiento, pero no puedo encontrar ningún ejemplo o solución en la web. Tal vez me estoy perdiendo algo.

Gracias

--- EDITAR ---

También probé esto. Traté de desactivar la actualización con shouldComponentUpdate, intenté establecer el estado solo en willRecieveProps y / o alternar, incluso sin alternar. También intenté jugar con LayoutAnimation. Pero nada funciona. this.setState () simplemente no anima el componente Switch. También intenté jugar con this._switch._rctSwitch.setNativeProps ({value: nextProps.active}) pero esto tampoco funciona (y huele a causa de _rctSwitch).

class ViewWithSwitchInside extends React.Component {
    constructor(props) {
        super(props)
        this.toggle = this.toggle.bind(this);
        this.state = {
            active: props.active
        }
    }

    componentWillReceiveProps(nextProps) {
        if (this.state.active != nextProps.active) {
            this.setState({ active: nextProps.active })
        }
    }

    toggle() {
        let newValue = !this.state.active
        this.setState({
            active: newValue,
        })
        if (typeof this.props.onClick === ''function'') {
            this.props.onClick(newValue)
        }
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={this.toggle}>
                <View>
                    <Text>{this.props.title}</Text>
                    <Switch value={this.state.active} />
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

Answer 1

No puede representar solo un hijo de su componente principal. Incluso si pudieras cambiar el valor de la variable de la que depende el Switch, no se mostrará a menos que vuelvas a renderizar el componente principal.

Intenté usar una variable global para establecer el valor del conmutador, también shouldComponentUpdate() reproducción del componente padre usando shouldComponentUpdate() que puede leer más aquí

Estos son mis resultados:

Este es el estado inicial de mi aplicación. Esa variable global se establece en falso y el componente principal ya se procesó.

Ahora cambio la variable global a verdadera tocando en la View alrededor del Switch y cambia

Pero nada cambia visualmente, solo cambia la variable, no el conmutador.

Luego cambio el state (un cambio irrelevante al componente Switch ) al presionar el texto "Re-render" en la parte inferior de la pantalla y sucede esto:

Este es el código de la aplicación de arriba:

var isActive = false; //global variable
class Test extends Component {
  constructor(props) {
    super(props);
    this.state={active:false, irrelevantState: true};
  }

  test(foo){
    console.log("Attempting to change", foo);
    isActive = foo;
  }

  shouldComponentUpdate(nextProps, nextState){
    if(this.state.active != nextState.active){//If the new state is different than the previous, stop rendering.
      this.test(nextState.active);
      return false;
    }else { //else, re-render everything
      return true;
    }
  }

  render(){
    console.log("Test re-render");
    return(
      <View style={{flex:1}}>
        <TouchableOpacity onPress={()=>{this.setState({active:!this.state.active})}} style={{flex:1, marginTop:20}}>
          <Text>Test Component</Text>
          <Switch value={isActive}/>
        </TouchableOpacity>
        <TouchableOpacity onPress={()=>{this.setState({active:true})}} style={{flex:1, marginTop:20}}>
          <Text>Test Component</Text>
          <Switch value={isActive}/>
        </TouchableOpacity>
        <TouchableOpacity style={{height:20}} onPress={()=>this.setState({irrelevantState:false})}>
          <Text> Re-render</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

Su mejor opción es encontrar una manera inteligente de volver a presentar solo cuando este estado. this.state.active y otros estados requeridos para que su aplicación funcione cambien, sin tener en cuenta otros cambios.