Question

我使用RN矢量图标作为书签目的。

目前的行为：我有多张带图标的照片，当我点击任何照片的任何图标时，所有图标的颜色都会发生变化。

预期行为：当我按下任何图标时，只应更改该图标的颜色，而不是全部。

我应该如何实现它？

我有以下代码：

this.state = {
  toggle: false,
}


<TouchableHighlight>
  <Icon name="ios-ribbon" onPress={()=> this.setState({toggle: !this.state.toggle})} size={30} style={[styles.icon, this.state.toggle && styles.iconAlt]} /> 
</TouchableHighlight>

式

icon: {
 color: '#000',
 height: 40,
 marginLeft: 60,
 marginRight: 60,
 marginBottom: 30,
 padding: 2,
},
iconAlt: {
 color: '#ff6600',
},

这是正常情况，即在点击任何图标之前

点击任何一个图标后，所有图标颜色都会改变

Answer 1

嗯，这似乎是关于改变图标颜色的问题，但在我看来真的超出了这个范围。

假设每个产品只有title和image，这两种状态。图标的颜色表示用户是否已将此产品添加到他/她的收藏夹中，因此，产品还应具有名为favorite的状态，该状态为布尔值。由于每个产品都有不同的状态，让我们这样做PureComponent Product就像这样：

import React, { PureComponent } from 'react';
import { View, Image, Text, LayoutAnimation } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

class Product extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            image: '',
            favorite: false
        };
    }

    componentWillMount() {
        const { title, image, favorite } = this.props;
        this.setState({ title, image, favorite });
    }

    componentWillUpdate() {
        LayoutAnimation.easeInEaseOut();
    }

    render() {
        const { title, image, favorite } = this.state;

        return (
            <View style={{ ... }}>
                <Text style={{ ... }}>
                    {title}
                </Text>
                <Image
                    source={image}
                    style={{ ... }}
                />
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <Icon
                        name={favorite ? 'heart' : 'heart-o'}
                        color={favorite ? '#F44336' : 'rgb(50, 50, 50)'}
                        size={30}
                        style={{ marginBottom: 10, marginTop: 20 }}
                        onPress={() => this.setState({ favorite: !favorite })}
                    />
                    <Text style={{ ... }}>
                        {favorite ? 'Remove from favorite' : 'Add to favorite'}
                    </Text>
                </View>
            </View>
        );
    }
}

export default Product;

在我们的主屏幕中，我们有一系列产品，然后我们将它们放在FlatList中：

<FlatList
    data={this.state.products}
    keyExtractor={(item) => item.title}
    renderItem={({ item }) => (
        <Product
            title={item.title}
            image={item.image}
            favorite={item.favorite}
        />
    )}
/>

然后，你会有这个，它看起来非常难看，只是稍微调整一下，在这里忍受我：

单击后如何单独更改每个图标的颜色？

1 个答案: