BÀI 8 - SỰ KIỆN TOUCH TRONG REACT NATIVE
Video bài học
Mình sẽ sử dụng code của bài trước và thêm vào đoạn code để hiển thị sự kiện click nhá
Cụ thể, mỗi khi chạm vào item component bất kỳ thì nó sẽ giảm opacity xuống và chúng ta có thể tùy chỉnh mức độ opacity này theo mức từ 0 đến 1.
Để thực hiện thì chỉ cần bao quanh bên ngoài chỗ cần click thẻ <TouchableOpacity activeOpacity={0.5} onPress={() => { Sự kiện trong click }} ></>
export default function ListComponents(props) {
const { category } = props
return (
<TouchableOpacity activeOpacity={0.5} onPress={() => {
Alert.alert('Tiêu đề Click', 'Bạn đã click item');
}}>
<View style={styles.container}>
<Text style={styles.title}>{category.name}</Text>
<Image style={styles.categoryImage} source={IconImage} />
</View>
</TouchableOpacity>
);
}
Bài trước thì mình đã đỗ dữ liệu vào FlatList và bài này mình bổ sung thêm phương thức click item trong FlatList đó.