Để hiển thị các chip trong giao diện người dùng, chúng tôi sẽ sử dụng React Native Paper MaterialDesign.
Cài đặt giấy bản địa react như hình dưới đây -
npm install --save-dev react-native-paper
Thành phần chip trông như sau trên giao diện người dùng -
Thành phần chip cơ bản như sau -
<Chip icon="icontodisplay" onPress={onPressfunc}>Chip Name</Chip> Các thuộc tính cơ bản của chip như sau -
| Đạo cụ | Mô tả |
|---|---|
| chế độ | Các giá trị cho chế độ là phẳng và có đường viền. Với chế độ phẳng, bạn sẽ không nhận được đường viền với đường viền có đường viền cho chip sẽ được hiển thị. |
| biểu tượng | Biểu tượng được cung cấp cho chip. |
| đã chọn | Các giá trị là true / false. Nếu đúng, chip sẽ được chọn. |
| selectColor | Màu sẽ được cung cấp cho chip đã chọn. |
| bị vô hiệu hóa | Để tắt chip. |
| onPress | Hàm sẽ được gọi khi các bản đồ sử dụng trên chip. |
| onClose | Hàm sẽ được gọi khi người dùng chạm vào nút đóng. |
| textStyle | Kiểu được cung cấp cho văn bản chip. |
| kiểu | Kiểu được cung cấp cho thành phần chip. |
Ví dụ:Để hiển thị chip
Mã hiển thị chip như sau -
<SafeAreaView style={styles.container}>
<Chip icon="camera" disabled onPress={() => console.log('camera')}>Click
Here</Chip>
<Chip icon="apple" mode="outlined"selectedColor='green' selected
onPress={() => console.log('apple')}>Apple Icon</Chip>
</SafeAreaView> Ví dụ
import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Chip } from 'react-native-paper';
const MyComponent = () => (
<SafeAreaView style={styles.container}>
<Chip icon="camera" style={styles.chip} disabled onPress={() =>
console.log('camera')}>Click Here</Chip>
<Chip icon="apple" style={styles.chip}
mode="outlined"selectedColor='green' selected onPress={() =>
console.log('apple')}>Apple Icon</Chip>
<Chip icon="calendar-month" style={styles.chip} mode="outlined" selected
onPress={() => console.log('calendar')}>Select Date</Chip>
</SafeAreaView>
);
export default MyComponent;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
chip: {
marginTop:10
}
}); Đầu ra
