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

您需要在 icon_active 状态下保留图标的key，而不是布尔值。这会让你对如何做到这一点有所预感：

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

Answer 2

  <Image source={this.props.secureTextEntry ? 
  require('../../assets/images/signup/Showpassword.png') : 
  require('../../assets/images/signup/Hidepassword.png')} />

在Carousel上React Native onPress活动状态更改图像源

2 个答案: