單擊後更改圖像，再次單擊React Native時再次更改爲上一圖像

Question

我需要在圖像上單擊時更改圖像，如果單擊圖像時需要再次更改圖像，如果再次單擊圖像時需要返回到先前狀態在圖像反應原生我的代碼是：

constructor (props) { 
    super(props); 
    this.state = { 
     toggleCollapse: false, 
     selectedUnit: null, 
    uri: require('../resources/icons/circle.png') 
    }; 
    _onPress =() => { 
    this.props.onPressItem(this.props.item, this.props.index); 
    this._renderLessons(this.props.item, this.props.index); 
    this.setState({ 
      toggleCollapse: !this.state.toggleCollapse, 
      uri: require('../resources/loader.gif') 
     }); 
    } 

Answer 1

在這裏，我如何做到這一點：

images = { 
    'first_image': require('../resources/icons/circle.png'), 
    'second_image': require('../resources/loader.gif'), 
}; 
class Example extends Component { 
constructor (props) { 
    super(props); 
    this.state = { 
     toggleCollapse: false, 
     selectedUnit: null, 
    }; 
} 
_onPress =() => { 
    ..... 
    this.setState({ 
     toggleCollapse: !this.state.toggleCollapse 
    }); 
} 
render() { 
    return (
     .... 
     <Image source={this.state.toggleCollapse ? images.first_image : images.second_image} /> 
     .... 
    ) 
} 
} 

Answer 2

有兩種狀態，開關值

constructor (props) { 
    super(props); 
    this.state = { 
    toggleCollapse: false, 
    selectedUnit: null, 
    next = require('../resources/icons/circle.png'), 
    uri: require('../resources/icons/circle.png') , 
    temp_store: '' 
}; 
_onPress =() => { 
     this.props.onPressItem(this.props.item, this.props.index); 
     this._renderLessons(this.props.item, this.props.index); 
     this.setState({ 
      toggleCollapse: !this.state.toggleCollapse, 
      temp_store: this.state.uri, 
      uri: this.state.next, 
      next: this.state.temp_store 
     }); 
    } 

基本上，將當前uri保存在一個臨時狀態，將uri更改爲next狀態，然後使之前的uri（在temp_store內部）成爲下一個狀態。