วิธีแสดง Material Chip View ใน React Native

เพื่อแสดง Chips ใน UI เราจะใช้ React Native Paper Material Design

การติดตั้ง

npm install --save-dev react-native-paper

รูปแบบ Chip Component

คอมโพเนนต์พื้นฐาน

<Chip icon="icontodisplay" onPress={onPressFunc}>Chip Name</Chip>

คุณสมบัติสำคัญ

ตัวอย่าง: แสดง Chip

<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>

โค้ดเต็มรูปแบบ

import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Chip } from 'react-native-paper';

const MyComponent = () => (
  
     console.log('camera')}>Click Here
     console.log('apple')}>Apple Icon
     console.log('calendar')}>Select Date
  
);

export default MyComponent;

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
  chip: { marginTop: 10 }
});

ผลลัพธ์

กรณีใช้งาน Chip

• Filter/Category selection (เลือกหมวดหมู่/กรองข้อมูล)
• Input chips (태그 입력)
• Action chips (กระทำเร็ว)
• Suggestion chips (คำแนะนำ)