React Native（with Redux）animate通過編程方式切換

Question

我的組件裏面有Switch組件。整個組件都是可點擊的。當你點擊這個組件時，它會激發調度（修改redux存儲）並導致這個組件被重新渲染。 我需要的是不重新渲染整個組件，而只是爲了將Switch組件設置爲適當的狀態。

像這樣的事情

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

任何想法？

我發現這個很常見的用例，我知道我會遇到很多類似的場景，所以我需要這種行爲，但我無法在Web上找到任何示例或解決方案。也許我只是想念一些東西。

感謝

---編輯---

我也嘗試過這一點。我試圖禁用更新與shouldComponentUpdate，我試圖設置狀態只在willRecieveProps和/或切換，即使沒有切換。我也試着玩LayoutAnimation。但沒有任何工作。 this.setState（）只是不會爲開關組件設置動畫。 我也嘗試玩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，它改變

但沒有什麼視覺上的變化，只有變量發生變化，而不是切換器。

我然後通過按下在屏幕的底部的「重新渲染」文本改變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，只有當其他國家要求你的應用程序的功能變化，無視其他變化。