javascript - How to change color of an component when its pressed in React Native FlatList - Stack Overflow

admin管理员组

文章数量:1302384

I have been trying to develop a list which has cards and list item from data source. I have successfully brought up the list, but what i want to achieve is that when ever user touches a Item in the list, the item's color should change.

Most importantly only one item should be selected. How to achieve this? I have grabbed the value of the data by using redux actions and reducers. But, i don't have any idea how to achieve this selection process.

My flatList code:

 <FlatList
    horizontal={true}
    data={this.qtyList}
    keyExtractor={item => item.id.toString()}
    showsHorizontalScrollIndicator={false}
    renderItem={({ item }) => (
            <TouchableHighlight 
            onPress={() => {

            }}
            >
            <Card
            containerStyle={{  borderRadius: 5 }}
            >
            <Text>
            {item.qty}
            </Text>
            </Card>
        </TouchableHighlight>
    )}
/>

Please provide step by step instructions, as i am totally a beginner. i don't want to do this with help of redux, so ponent level state would be great help.

I have been trying to develop a list which has cards and list item from data source. I have successfully brought up the list, but what i want to achieve is that when ever user touches a Item in the list, the item's color should change.

Most importantly only one item should be selected. How to achieve this? I have grabbed the value of the data by using redux actions and reducers. But, i don't have any idea how to achieve this selection process.

My flatList code:

 <FlatList
    horizontal={true}
    data={this.qtyList}
    keyExtractor={item => item.id.toString()}
    showsHorizontalScrollIndicator={false}
    renderItem={({ item }) => (
            <TouchableHighlight 
            onPress={() => {

            }}
            >
            <Card
            containerStyle={{  borderRadius: 5 }}
            >
            <Text>
            {item.qty}
            </Text>
            </Card>
        </TouchableHighlight>
    )}
/>

Please provide step by step instructions, as i am totally a beginner. i don't want to do this with help of redux, so ponent level state would be great help.

• javascript
• react-native
• jsx

Share Follow edited Jan 8, 2019 at 19:13 James Z 12.3k1010 gold badges2727 silver badges4747 bronze badges asked Jan 8, 2019 at 15:02 ArvindhArvindh 62022 gold badges1212 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You need a function which sets state when the user click an item of FlatList. When the state changes, ponent style will change for showing selected item. And you should set extraData to FlatList for rendering when the state changes.

class Second extends React.Component {    
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: null
        };
    }

    onPressHandler(id) {
        this.setState({selectedItem: id});
    }

    render() {
        return (
            <View>
                <FlatList
                    extraData={this.state.selectedItem} //Must implemented
                    horizontal={true}
                    data={qtyList}
                    keyExtractor={item => item.id.toString()}
                    showsHorizontalScrollIndicator={false}
                    renderItem={({item}) => (
                        <TouchableOpacity
                            onPress={() => this.onPressHandler(item.id)}>
                            <Card
                                containerStyle={this.state.selectedItem === item.id ? {
                                    borderRadius: 5,
                                    backgroundColor: "#000000"
                                } : {borderRadius: 5, backgroundColor: "#a1a1a1"}}>
                                <Text>{item.qty}</Text>
                            </Card>
                        </TouchableOpacity>
                    )}
                />
            </View>
        );
    }
}

You should store the id of the selected item in the state:

<TouchableHighlight 
  onPress={() => {
    this.setState({ itemSelected: item.id }) <== your item must have a unique id
  }}
>

Then, for example in your card ponent you can do:

<Card
  containerStyle={{
    borderRadius: 5,
    backgroungColor: this.state.itemSelected === item.id ? 'red', 'white',
  }}
>

In addition, you have to add extraData={this.state} to your flatlist. Here's the link to the doc

本文标签： javascriptHow to change color of an component when its pressed in React Native FlatListStack Overflow