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 đó.