javascript - 如何在 React Native 的平面列表中更改所选项目的颜色?
问题描述
我是 React Native 的新手。字母位于应用程序屏幕的顶部。单击任何字母时,单击的字母会出现在屏幕上。我希望单击字母的颜色与平面列表中其他字母的颜色不同。我怎样才能做到这一点?
代码:
import React, { useState } from 'react'
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
const WordPage = () => {
const [selectedLetter, setSelectedLetter] = useState("A")
const alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K",
"L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
const _renderAlphabet = ({ item }) => {
return (
<TouchableOpacity onPress={() => { setSelectedLetter(item) }}>
<View style={styles.alphabetContainer}>
<Text style={styles.alphabetText}>{item}</Text>
</View>
</TouchableOpacity>
)
}
return (
<View style={styles.container}>
<View>
<FlatList
data={alphabet}
renderItem={_renderAlphabet}
horizontal
/>
</View>
<Text style={styles.text}>{selectedLetter}</Text>
</View>
)
}
export default WordPage
const styles = StyleSheet.create({
container: {
flex: 1,
},
alphabetContainer: {
width: 24,
height: 24,
marginLeft: 14,
marginTop: 14,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green'
},
alphabetText: {
fontSize: 18,
color: 'white',
},
text: {
fontSize: 100,
justifyContent: 'center',
alignSelf: 'center'
}
});
解决方案
您可以为所选项目创建自定义样式并有条件地应用它。
const _renderAlphabet = ({ item }) => {
return (
<TouchableOpacity onPress={() => { setSelectedLetter(item) }}>
<View style={item === selectedLetter ? styles.alphabetContainerSelected: styles.alphabetContainer}>
<Text style={styles.alphabetText}>{item}</Text>
</View>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
...
alphabetContainer: {
width: 24,
height: 24,
marginLeft: 14,
marginTop: 14,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green'
},
alphabetContainerSelected: {
width: 24,
height: 24,
marginLeft: 14,
marginTop: 14,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
},
...
});
推荐阅读
- python - 数据框中的字典字典
- java - Android中BottomNavigationView的分隔符
- javascript - React Fetch 不适用于一个链接,但适用于另一个链接
- flutter - 实现路易威登应用程序等项目列表视图的自定义水平滚动
- wordpress - 在类别末尾出售的产品
- spring-boot - 我们可以回滚 kafka 消息吗
- java - Exoplayer 无法正确播放大型本地视频
- python - 根据唯一的 col 值合并两个数据帧
- html - 链接引导程序和 JS 文件时 CSS 未链接到 Html
- php - array_uintersect 与子数组不相交第一项