反应原生 "touch"后如何更改在平面列表中呈现的项目样式？

Question

我想更改物品的样式，例如color或flatlist中的字体，我检查了一些问题，例如这个问题，但是它们在我的代码中不起作用。如果我使用循环而不是flatlist，我可以成功更改项目的样式。

这是我的代码

let jobCategory= [
    {
        "id": "a",
        "name": "1",
    },
    {
        "id": "b",
        "name": "2",
    },
    {
        "id": "c",
        "name": "3",
    },
    {
        "id": "d",
        "name": "4",
    },
    {
        "id": "e",
        "name": "5",
    },
    {
        "id": "f",
        "name": "6",
    },
]

const styles = StyleSheet.create({
    categoryUnselectedStyle: {
        paddingTop: pxToDp(25),
        paddingBottom: pxToDp(25),
        paddingRight: pxToDp(30),
        paddingLeft: pxToDp(30),
        backgroundColor: '#f4f6f7',
    },
    categoryselectedStyle: {
        backgroundColor: 'white',
    },
    categoryTextUnselectedStyle: {
        color: '#666666',
        fontSize: pxToDp(28)
    },
    categoryTextselectedStyle: {
        color: 'lightblue',
        fontSize: pxToDp(40),
    },
});

const JobExpectPage = (props) => { 
    const [categorySelected, setCategorySelected] = useState("")

        const renderJobCategory = ({ item }) => {
        return (
            <TouchableOpacity
                key={item.id}
                onPress={() => setCategorySelected(item.id)}
                style={[styles.categoryUnselectedStyle, categorySelected == item.id && styles.categoryselectedStyle]}
            >
                <View>
                    <Text style={[styles.categoryTextUnselectedStyle, categorySelected == item.id && styles.categoryTextselectedStyle]}> {item.name}</Text>
                </View>
            </TouchableOpacity>
        )
    }


    return (
        <View> 
            <FlatList 
                data={jobCategory}
                renderItem={renderJobCategory}
        </View>
    )
}

我希望在按下该项目后，它的样式将会更改。我已经没有flatlist成功了，我该如何使用flatlist？

Answer 1

这里的问题是flatlist并不是重新读取，因为 array jobCategory始终是相同的。

您必须将属性推出添加到flatlist并通过类别选择的挂钩，因此flatlist然后知道，当类别选择时，它必须恢复时，它必须如下：

。

 return (
        <View> 
            <FlatList 
                data={jobCategory}
                renderItem={renderJobCategory}
                extraData={categorySelected}
        </View>
    )

通过传递retradata = {类别选择为flatlist，我们确保 当类别选择更改时，FlatList本身将重新渲染。 如果不设置此道具，flatlist不会知道它需要 重新渲染任何项目，因为它也是属材料和道具 比较不会显示任何更改。