React Native（Redux付き）animateプログラム的にスイッチ

Question

スイッチコンポーネントが内部にあります。この全体のコンポーネントはクリック可能です。このコンポーネントをクリックすると、dispatch（reduxストアを変更する）が実行され、このコンポーネントが再レンダリングされます。 私が必要とするのは、コンポーネント全体を再レンダリングせず、そのスイッチコンポーネントを適切な状態にアニメーション化することです。この

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

任意のアイデアのような

何か？

私はこの非常に一般的な使用例を見つけました。私はこのようなシナリオがたくさんあるので、私はこの動作が必要ですが、ウェブ上で例や解決策を見つけることはできません。たぶん私は何かが欠けているかもしれません。私もこれを試してみました

おかげ

--- EDIT ---

。私は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

親コンポーネントから子を1つだけレンダリングすることはできません。スイッチが依存する変数の値を何らかの形で変更することができたとしても、親コンポーネントを再レンダリングしない限り表示されません。

：

私はスイッチャーの値を設定するために、グローバル変数を使用しようと、私はまた、あなたがhere

これは私の結果であるの詳細を読むことができますshouldComponentUpdate()を使用して親コンポーネントの再レンダリングを防止しました

これは私のアプリの初期状態です。そのグローバル変数はfalseに設定され、親コンポーネントは既にレンダリングされています。

今、私はSwitch周りViewをタップしてtrueにグローバル変数を変更し、それが

は変わりますが、何も視覚的に変化していない、唯一の変数はスイッチャー、ない変更。

Iは、画面の下部にある「再レンダリング」テキストを押してstate（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およびその他の必要な状態を再レンダリングするスマートな方法を見つけることです：アプリケーション上では、のその他の変更。