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