প্রতিক্রিয়া নেটিভ এ উপাদান চিপ ভিউ কিভাবে প্রদর্শন করবেন?

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

আউটপুট