Question

我在flatList上呈现5 TouchableOpacity。我想从我在flatList中按下的那一个更改borderColor而不更改另一个，并使用保存在for i in {1..10}; do printf '%s\t%s\t%s\n' $(./my_exe) $(./my_exe) $(./my_exe) done > out.txt

中的索引来完成

state

Answer 1

您需要找到唯一的TouchableOpacity：

将索引保存为状态：

state = {
    index: null
}

在onPressChangeColor函数中保存唯一索引，如下所示：

onPressChangeColor = (id,index) => {
     //do what you want with the id
     this.setState({index})
}

和FlatList进行了一些更改：

<FlatList data={this.state.data} keyExtractor={item => item.id}
    numColumns={columns}
    renderItem={({ item, index }) => {
        if (item.empty) {
            return <View style={[Cards.item, Cards.itemEmpty]} />;
        }
        return (<View style={[{ flex: 1 }]}>
            <TouchableOpacity onPress={() => this.onPressChangeColor(item.id, index)}
                style={[Cards.item, {
                    backgroundColor: "grey",
                    borderColor: index == this.state.index ? "green" : "grey",
                    borderWidth: 2
                }]}>
            <Text style={[{ color: "white", textAlign: 'center', alignSelf: 'center' }]}>{item.name}</Text>
            </TouchableOpacity>
        </View>);
        }
    }
/>

使用ExtraData更改FlatList中的唯一项

1 个答案: