React Nativeでマテリアルチップビューを表示するにはどうすればよいですか？

UIにチップを表示するには、React NativePaperMaterialDesignを使用します。

以下に示すようにreactNativePaperをインストールします-

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

出力