如何更改 React Native 中平面列表中所选项目的颜色?
How can I change the color of selected item in flatlist in React Native?
我是 React Native 的新手。字母表位于应用程序屏幕的顶部。单击任何字母时,单击的字母会出现在屏幕上。我希望被点击的字母的颜色与 flatlist 中其他字母的颜色不同。我该怎么做?
代码:
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'
},
...
});
我是 React Native 的新手。字母表位于应用程序屏幕的顶部。单击任何字母时,单击的字母会出现在屏幕上。我希望被点击的字母的颜色与 flatlist 中其他字母的颜色不同。我该怎么做?
代码:
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'
},
...
});