reactjs - 以编程方式响应 native (使用 Redux)动画切换

Question

我有一个组件，里面有 Switch 组件。整个组件都是可点击的。当您单击此组件时，它会触发调度(修改 redux 存储)并导致此组件重新渲染。我需要的是不重新渲染整个组件，而只是将该 Switch 组件动画化到正确的状态。

类似这样的事情

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

有什么想法吗？

我发现这个非常常见的用例，并且我知道我会遇到很多类似的场景，所以我需要这种行为，但我在网络上找不到任何示例或解决方案。也许我只是错过了一些东西。

谢谢

--- 编辑 ---

这个我也试过了。我尝试使用 shouldComponentUpdate 禁用更新，我尝试仅在 willRecieveProps 和/或切换中设置状态，即使没有切换。我也尝试过使用 LayoutAnimation。但没有任何作用。 this.setState() 只是不会为 Switch 组件设置动画。我也尝试过使用 this._switch._rctSwitch.setNativeProps({ value: nextProps.active }) 但这也不起作用(并且由于 _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

您不能仅渲染父组件中的一个子组件。即使您能够以某种方式更改 Switch 所依赖的变量的值，它也不会显示，除非您重新渲染父组件。

我尝试使用全局变量来设置切换器的值，我还使用 shouldComponentUpdate() 阻止了父组件的重新渲染，您可以在 here 上阅读更多内容。

这是我的结果:

这是我的应用程序的初始状态。该全局变量设置为 false，并且父组件已呈现。

现在，我通过点击 Switch 周围的 View 将全局变量更改为 true，它发生了变化

但是视觉上没有任何变化，只是变量发生了变化，而不是切换器。

然后，我通过按屏幕底部的“重新渲染”文本来更改状态(与Switch组件无关的更改)，并且会发生这种情况:

这是上面应用程序的代码:

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

您最好的选择是找到一种智能方法，仅在 this.state.active 和应用运行所需的其他状态发生变化时重新渲染，而忽略其他更改。