資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 React Native 中顯示 Material Chip 檢視？
為了在 UI 中顯示晶片，我們將使用 React Native Paper Material Design。
如下所示安裝 react native paper：
npm install --save-dev react-native-paper
晶片元件在 UI 上的顯示如下：
基本的晶片元件如下：
<Chip icon="icontodisplay" onPress={onPressfunc}>Chip Name</Chip>晶片的基本屬性如下：
| 屬性 | 描述 |
|---|---|
| 模式 | 模式的值為 flat 和 outlined。使用 flat 模式，您將不會獲得邊框，而使用 outlined 模式，將顯示晶片的邊框。 |
| 圖示 | 要賦予晶片的圖示。 |
| 已選擇 | 值為 true/false。如果為 true，則晶片將被選中。 |
| 選中顏色 | 要賦予選中晶片的顏色。 |
| 停用 | 停用晶片。 |
| 按下 | 當用戶點選晶片時，將呼叫此函式。 |
| 關閉 | 當用戶點選關閉按鈕時，將呼叫此函式。 |
| 文字樣式 | 要賦予晶片文字的樣式。 |
| 樣式 | 要賦予晶片元件的樣式。 |
示例：顯示晶片
顯示晶片的程式碼如下：
<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
}
});輸出
更新於： 2021 年 7 月 1 日
777 次檢視
廣告