React Native onPress aktiver Zustand Bildquelle auf Karussell ändern

Question

Ich versuche, das Bild einer Schaltfläche auf meinen Karussellelementen zu ändern, im Moment ändert es (unter Code) alle Bilder, wenn ich auf eine davon klicke. Ich möchte nur das Bild des aktuellen Karussells verändern. Irgendwelche Ideen? Dank

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

Sie müssen in dem icon_active Zustand key des Symbols zu halten, kein boolean. Dies gibt Ihnen eine Ahnung, wie es geht:

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