रिएक्ट नेटिव में मटीरियल चिप व्यू कैसे प्रदर्शित करें?

UI में चिप्स प्रदर्शित करने के लिए, हम रिएक्ट नेटिव पेपर मटेरियल डिज़ाइन का उपयोग करने जा रहे हैं।

नीचे दिखाए अनुसार रिएक्ट नेटिव पेपर इंस्टॉल करें -

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
   }
});

आउटपुट