จะแสดง Material Chip View ใน React Native ได้อย่างไร?

ในการแสดงชิปใน UI เราจะใช้ React Native Paper MaterialDesign

ติดตั้งกระดาษที่ตอบสนองตามที่แสดงด้านล่าง -

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

ส่วนประกอบชิปมีลักษณะดังนี้บน UI -

ส่วนประกอบชิปพื้นฐานมีดังนี้ −

<Chip icon="icontodisplay" onPress={onPressfunc}>Chip Name</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 = () => (
   <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
   }
});

ผลลัพธ์