[英]react-native How to change an item's style rendered in FlatList after "touch" it?
我想在 FlatList 中更改項目的樣式,例如 color 或 fontSize,我檢查了一些問題,例如this one或this one ,但它們在我的代碼中不起作用。 如果我使用循環而不是 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>
)
}
我希望在我按下 item 后,它的樣式會改變。 沒有 FlatList 我已經成功了,我怎么能用 FlatList 做到呢?
這里的問題是 flatlist 沒有重新渲染,因為array jobCategory
總是相同的。
您必須將屬性 extraData 添加到 flatlist 並傳遞 categorySelected 鈎子,因此 flatlist 知道當 categorySelected 更改時,它必須重新渲染,請執行以下操作:
return (
<View>
<FlatList
data={jobCategory}
renderItem={renderJobCategory}
extraData={categorySelected}
</View>
)
通過將 extraData={categorySelected 傳遞給 FlatList,我們確保當 categorySelected 更改時,FlatList 本身將重新呈現。 如果沒有設置這個 prop,FlatList 不會知道它需要重新渲染任何項目,因為它也是一個 PureComponent,並且 prop 比較不會顯示任何更改。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.