React Native onPress活動狀態在Carousel上更改圖像源

Question

試圖更改我的傳送帶元素上按鈕的圖像時，當我單擊其中任何一個時，它（下面的代碼）會更改所有圖像。我只想改變目前的旋轉木馬的形象。有任何想法嗎？由於

class CarouselImages extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      myImagesArray: [ 
       { 
        key: 1, 
        title: 'Category' 
       }, 
       { 
        key: 2, 
        title: 'Category' 
       }, 
       { 
        key: 3, 
        title: 'Category' 
       } 
      ], 
      icon_active: false, 
     } 

     activateCarouselButton = a => { 
      const newState = Object.assign(
       {}, 
       { 
        icon_active: false, 
       }, 
       { [a]: true }, 
      ) 
      this.setState(newState); 
     } 
    } 

    render =() => { 
     const { icon_active } = this.state; 
     var myCarousel = this.state.myImagesArray.map(function (index) { 
      return (
       <View key={index}> 
        <TouchableHighlight onPress={() => activateCarouselButton('icon_active')} > 
         <Image 
          source={icon_active ? require('../Image/active@2x.png') : require('../Image/disabled@2x.png')} /> 
        </TouchableHighlight> 
       </View> 
      ); 
     }); 

     return (
      <View> 
       <Carousel 
        style={{ backgroundColor: '#fff' }}> 
        {myCarousel} 
       </Carousel> 
      </View> 
     ) 
    } 
} 

Answer 1

您需要按住圖標的key在icon_active國家，而不是一個布爾值。這給你一個如何做到這一點的預感：

render() { 
    const { icon_active } = this.state; 
    return (
    this.state.myImagesArray.map((image) => { 
     return (
     <View key={image.key}> 
      <TouchableHighlight onPress={() => activateCarouselButton(image.key)}> 
      <Image source={icon_active === image.key ? require('../Image/active@2x.png') : require('../Image/disabled@2x.png')} /> 
      </TouchableHighlight> 
     </View> 
    ) 
    }) 
) 
}